css3 文字特效

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background-color: #AEAEAE;}
p{font-size: 50px;float: left;margin-right: 2em;font-weight: bold;}
.p1{
    color: #fff;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);
}
.p2{
    color: #fff;
    text-shadow:0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816
}
.p3{
    color: #222;
    text-shadow: 0px 2px 3px #D6D6D6;
}
.p4{
    color: #FFFFFF;
    text-shadow: 0 -1px 0 #374683;
}
.p5{color: #c00;
    -webkit-text-stroke: 1px #000;
}
.p6{color: #c00;
    -webkit-text-stroke: 1px #000;
    -webkit-text-fill-color: transparent;
}
.p7{
    color: rgba(255, 100, 140,0.5);
    text-shadow: 3px 3px 0 rgba(80,255,0,0.8);
}
.p8{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.p9{
    color: #ccc;
    text-shadow: -1px -1px #fff, 1px 1px #333;
}
.p10{
    color: transparent;
    text-shadow: 0 0 4px #f36;
}
.p11{
    background:url("http://d.hiphotos.baidu.com/image/w%3D310/sign=c81c81f5dec451daf6f60aea86fc52a5/8326cffc1e178a826ac8660bf503738da877e8a1.jpg") no-repeat left top;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.p12{
    background: #666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 3px 3px rgba(255,255,255,0.5);
}
</style>
</head>
<body>
    <p class="p1">3D立体效果</p>
    <p class="p2">霓虹灯效果</p>
    <p class="p3">凸版效果</p>
    <p class="p4">浮雕效果</p>
    <p class="p5">描边效果</p>
    <p class="p6">抽空文字</p>
    <p class="p7">补色3D效果</p>
    <p class="p8">旋转文本</p>
    <p class="p9">浮雕效果</p>
    <p class="p10">模糊效果</p>
    <p class="p11">图片填充文字</p>
    <p class="p12">True Inset Effect</p>
</body>
</html>

时间: 2024-10-10 12:54:08

css3 文字特效的相关文章

CSS自学笔记(12):CSS3文字特效

在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的计算机上未安装该字体,可能会达不到开发人员的预期效果.而通过CSS3,开发人员可以使用他们喜欢的任意字体,只要将需要的字体文件放到web服务器上就OK了. 注:现在的主流浏览器不支持部分新增属性. 最简单的文本特效就是给文本添加阴影了. 可以给文本添加水平偏移值.垂直偏移值和模糊半径,也可以定义阴影

css3文字特效

写过很多页面,可是在实际中用到文字特效的地方还是很少,最多的就是给文字添加text-shadow阴影效果. 今天在浏览网页的时候发现了一组文字特效,虽然很简单但是你让我来写我肯定是写不出来,所以研究了一会,写了几个小样式. 一.文字渐变 主要样式有 linear-gradient(文字渐变方向,指定颜色,渐变颜色 渐变起始位置) text-fill-color(指定文字的填充颜色) PS:如果和color一起用将会覆盖color的颜色 <style> @-webkit-keyframes bg

7款震撼人心的HTML5文字特效

1.CSS3五彩文字特效 文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加上漂亮的英文字体,让整一个文字特效显得非常出色迷人,大家可以在宣传广告页面试试这款CSS3文字特效. 在线演示 源码下载 2.HTML5/CSS3 Loading动画 水位充满文字特效 这款HTML5动画既是Loading特效也是文字特效,Loading动画开始时,文字中的水位渐渐上升,为了模拟水位

CSS3实现水位充满文字特效

CSS3实现水位充满文字特效是一款既是Loading特效也是文字特效,Loading动画开始时,文字中的水位渐渐上升,为了模拟水位上升的真实效果,水面还会波浪浮动,当Loading动画结束时,文字中的水位又会渐渐退去,动画效果和上升类似,这样周而复始,从而达到很酷HTML5 Loading动画效果.JQuery特效 源代码:http://www.huiyi8.com/sc/8898.html CSS3实现水位充满文字特效,布布扣,bubuko.com

jQuery+CSS3文字跑马灯特效

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/texiao/jquery/83/ 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http

纯CSS3创意loading文字特效

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M 分享  [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS 官方QQ群:(申请加入,说是我推荐的) App实践出真知 4

IT兄弟连 HTML5教程 CSS3属性特效 文字阴影

文字阴影是可以叠加的.最基本可以给出四个值,用法如下: text-shadow:x y blur color 文字阴影的参数说明如表1所示. 表1  CSS3文字阴影参数说明 横向偏移量和纵向偏移量可以为负值,代表文字阴影向左偏移或向上偏移.文字阴影是可以叠加的,但是加很多层,会影响页面加载速度.添加多层阴影用“,”隔开.阴影叠加是先渲染前面的,再渲染后面的. 1.最简单的用法 text-shadow:2px 2px 4px #000; 此语法说明为一段文字设定横向偏移量为2px,纵向偏移量为2

IT兄弟连 HTML5教程 CSS3属性特效 文字排版

direction定义文字排列方式,所有浏览器都兼容这个属性,有两个可选值rtl和ltr.文字排版的参数说明如表1所示. 表1  CSS3文字排版参数说明 上表所示,ltr是初始值,表示left-to-right,就是从左往右的意思,具体描述就是内联内容从左往右依次排布.我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边. rtl则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个C

18款js和jquery文字特效代码分享

jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形球状的3D云标签动画效果 原生js tagscloud文字标签云仿快播文字标签云上下滚动出现 jquery文字跳舞鼠标滑过段落文字波浪线条跳动 jquery lettering书写中文彩色文字_html彩色文字特效 jquery 文字特效霓虹灯文字效果使用jQuery和CSS jquery文字动画插件制作文字flash动画滤镜效果切换特效