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

原始数据

按行查看

历史

html 给文字的特效,文字特效.html相关推荐

html简单边框制作--特效文字制作及代码,HTML音画介绍之一--基本原理和边框的制作...
谨以此系列篇献给需要学习HTML代码音画的紫雨朋友们. 晕,写这篇教程,熬了几个深夜.欣慰的是,紫雨的教程是自己用心写出来的,绝不雷同.这是紫雨对朋友的负责. HTML音画最大的好处是简便易学,效 ...
液体特效文字AE标题模板免费下载
这是一种时尚的液体特效文字AE标题模板免费下载,具有精美的设计,令人印象深刻的液体文本动画和时尚的过渡效果.使用9个可编辑文本层,13个媒体占位符和1个logo占位符非常容易.使用全彩控制器,只需将其 ...
ps制作20种特效文字_如何使用会声会影进行质感文字制作——动态扫光浮雕特效...
如何使用会声会影进行质感文字制作 --动态扫光浮雕特效我们时刻都被各种视频炫酷的特效质感文字包围,其实只需下载一个会声会影软件,分分钟就可以做出各种特效质感文字.上一篇是制作静态高光特效文字,感兴趣 ...
html语言特效字,html特效文字代码1...
HTML特效文字代码1 一.文字大小.字体.颜色 1. 设置文字大小的属性是"size"他的取值范围是1到7.其中1为最小,7为最大. 格式: <fonr size=文字 ...
超级炫酷夜场酒吧KTV宣传视频模板镂空文字故障闪屏特效PR模板
超级炫酷夜场酒吧KTV宣传视频模板镂空文字故障闪屏特效PR模板超级时尚炫酷Premiere夜场酒吧KTV宣传视频模板,具有动态场景,频闪效果和原始过渡.该模板具有9个媒体占位符,8个可编辑文本层和 ...
html 自动滚动通知,利用CSS3实现文字滚动通知动画特效
特效描述:利用CSS3实现文字滚动通知动画特效.利用CSS3实现文字滚动通知动画特效代码结构 1. HTML代码 .menu-list{list-style:none; width:300px; ...
html特效 wpf,利用WPF实现一个简单的文字粒子闪烁动画特效
利用WPF实现一个简单的文字粒子闪烁动画特效发布时间:2020-11-06 16:04:19 来源:亿速云阅读:124 作者:Leah 本篇文章给大家分享的是有关利用WPF实现一个简单的文字粒子闪 ...
html简单边框制作--特效文字制作及代码,HTML简单边框制作--特效文字制作及代码...
特效文字制作及代码一.删除线删除线代码如下:文字内容文字顶部加横线代码如下:文字顶部加横线三.带背景字体带背景字体代码如下:带背景字体四.投影效果投影效果代码 ...
【源码+演示】高考加油！HTML+CSS特效文字祝福_程序员祝福高考学子旗开得胜！
又是一年盛夏至,愿高三学子高中毕业日,即是高中名校时! 本篇为大家带来3款HTML+CSS制作出的小项目,为高考学子加油助威,愿他们旗开得胜,金榜题名![源码+演示]高考加油!HTML+CSS特效文字 ...
黑客面板特效文字矩阵
黑客面板特效文字矩阵转载自木鱼_Max,原文链接:https://blog.csdn.net/weixin_38785697/article/details/79069352,黑客文字矩阵特效,下面 ...

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

html 给文字的特效,文字特效.html相关推荐

最新文章

热门文章