纯css3做各种字的特效效果，以及源码css3里面值的用法
html：
<body>
<p>夹心效果</p>
<p>光晕效果</p>
<p>浮雕效果</p>
</body>
css：
<style>
body{ font-size:60px; font-family:"微软雅黑"; background:#000; color:#fff;}
p:nth-child(1){
color:red; font-size:80px; font-weight:bold;
text-align:center; text-shadow:2px 2px 0 #fff,4px 4px 0 red; margin-bottom:5px;
}
p:nth-child(2){
color:#fff; font-size:80px;
text-align:center; margin-bottom:5px; text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 40px #ff00de,0 0 70px #ff00de,0 0 80px #ff00de,0 0 120px #ff00de;
}
p:nth-child(3){
color:#000; font-size:80px;font-weight:bold;
text-align:center; margin-bottom:5px; text-shadow:2px 2px 4px #fff;
}
</style>
接下来是一个带火焰效果的字！是带动画的，当然里面火焰的内火颜色值什么的，大家可以自己设置
html：
<body>
<p>火焰效果</p>
</body>
css：
<style>
body{ font-size:120px; font-family:"微软雅黑"; background:#000; color:#fff;}
@-webkit-keyframes test{
0%{
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
}
30%{
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,10px -90px 80px #f38e1c;
}
60%{
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0px -80px 100px #f38e1c;
}
100%{
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
}
}
p{font-weight:bold; color:#fff;
text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
animation:1s test linear infinite;
}
</style>
喜欢的老铁们，就关注点赞666！--下期给大家分享光照效果源码！
- 上一篇：CSS3 用户界面
- 下一篇：css3渐变背景主题特效
