CSS 文字加阴影变3D效果演示

所属分类：网页制作 / CSS 阅读数： 1189

收藏 0赞 0分享

<title>几款CSS给文字加阴影变3D效果演示</title> <style type="text/css">  </style> <div class="webfx-main-body"> <p onclick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" >Jb51</span><span class="sample" style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> Jb51</span> <p onclick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" >WebFX</span><span class="sample" style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" >Jb51</span> <p onclick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; color: white;" >Jb51</span><span class="sample" style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" >Jb51</span> <p onclick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);">Jb51</span> </div>

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

更多精彩内容其他人还在看

CSS 文字加阴影变3D效果演示

动态的样式语言less语法详解之变量与extend

动态的样式语言less语法详解之混合属性

浏览器端如何使用Less

CSS3动画效果回调处理详解

纯css3实现的竖形无限级导航

一款纯css3实现的tab选项卡的实列教程

一款利用纯css3实现的win8加载动画的实例分析

一款纯css3实现的竖形二级导航的实例教程

padding ie 不兼容问题

CSS3简单实现照片墙

网络赚钱

站长故事