html 给文字的特效,文字特效.html

文字特效

body{background:#ccc;}

p{font-size:2em;text-align:center;font-weight:bold;}

p:nth-child(1){color:#f00;text-shadow: 1px 1px 0px #212121;}

p:nth-child(2){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);}

p:nth-child(3){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;}

p:nth-child(4){color:#222;text-shadow:0 2px 3px #555;}

p:nth-child(5){color:#ffffff;text-shadow:0 -1px 0 #374683;}

p:nth-child(6){color:#c00;-webkit-text-stroke:1px #000;}

p:nth-child(7){-webkit-text-fill-color: transparent;-webkit-text-stroke:1px #000;}

p:nth-child(8){color:rgba(255, 100, 140, 0.5);text-shadow:3px 3px 0 rgba(80,255,0,0.8);}

p:nth-child(9){color:transparent;text-shadow:0 0 4px #f36;}

p:nth-child(10){

font-size: 40px;font-weight: bold;background:url(img/9.jpg);

/*下面两句代码必须同时出现，才能达到效果*/

-webkit-text-fill-color: transparent;

-webkit-background-clip:text;

}

div{

color:#000;

text-shadow: 10px 10px 20px yellowgreen;}

内阴影效果:What are you 弄啥嘞？

3D立体效果:What are you 弄啥嘞？

霓虹灯效果:What are you 弄啥嘞？

凸版效果:What are you 弄啥嘞？

浮雕效果:What are you 弄啥嘞？

描边效果:What are you 弄啥嘞？

webkit镂空:What are you 弄啥嘞？

补色3D效果:What are you 弄啥嘞？

模糊效果:What are you 弄啥嘞？

图片填充文字:What are you 弄啥嘞？

属性值：

length---设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

percentage---以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

cover---以铺满整个box为目标，等比放大(缩小);

contain---等比放大(缩小),当某个边界碰到外面box就停止放大(缩小);

auto ---默认值，图像以本尺寸显示 。

一键复制

编辑

Web IDE

原始数据

按行查看

历史