当前位置: 秋叶网络博客 前端编程 ◊ CSS3阴影打造发光的3D字体

CSS3阴影打造发光的3D字体

作者:秋了秋 发表时间:2015年05月01日

html代码如下:

<div style="background:#000;height: 500px;line-height: 130px;">
<p class="text-shadow">秋叶网络博客</p>
<p class="text-shadow2">秋叶网络博客</p>
<p class="text-shadow3">秋叶网络博客</p>
<div class="box-shadow"></div>
</div>

css代码如下:

.text-shadow{font-size: 120px !important;text-align:center;color:#fff;text-shadow:0 0 5px #A03434, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;}
.text-shadow2{font-size: 120px !important;text-align:center;color:#fff;text-shadow:3px 0 0 red,0 3px 0 blue,6px 6px 0 yellow,0 0 1px orange}
.text-shadow3{font-size: 120px !important;text-align:center;color:#ccc;text-shadow:1px 1px 0 #fff,2px 2px 0 #fff,3px 3px 0 #fff,4px 4px 0 #fff,5px 5px 0 #fff,6px 6px 0 #fff,7px 7px 0 #fff,8px 8px 0 #fff,9px 9px 0 #fff,10px 10px 0 #fff,11px 11px 0 #fff,12px 12px 0 #fff,13px 13px 0 #fff,14px 14px 0 #fff}

效果:

秋叶网络博客

秋叶网络博客

秋叶网络博客

结合animation动画的发光字体:

code代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/344.html
目录: 前端编程 | 标签: 3D字体 | 6123次阅读