欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

文本模糊效果 有大用

shiping1 的头像

下面是自己亲自做的例子
.mohu {text-shadow:0 0 4px #dddddd;opacity:0.08;  }


CSS3文字模糊效果(#3519)

这个一个CSS3的文字模糊效果展示并配合了js

原理其实很简单,就是一个选项卡的原理。然后再配合css3的一些属性,从而实现文字模糊。 
兼容的浏览器:
IE: 9 (支持部分)
FireFox √
safari √
chrome √
opera √

  1. body {background:#CCC;}  

  2. #ul1 {width:1040pxmargin:40px auto;}  

  3. #ul1 li {width:200pxheight:200pxbackground:whitefloat:leftmargin:10pxlist-style:nonepadding:20px; box-shadow:2px 2px 2px #999; -webkit-transition:0.5all linear;-moz-transition:0.5all linear;-ms-transition:0.5all linear;-o-transition:0.5all linear;}  

  4. #ul1 li h2 {font-size:24pxline-height:40px;}  

  5. #ul1 li p {font-size:12pxline-height:18px;}  

  6. #ul1 .back {text-shadow:0 0 10px black; -webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9); box-shadow:0 0 10px 4px white; opacity:0.8color:rgba(0,0,0,0);}  

  7. #ul1 .active {-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1); box-shadow:3px 3px 4px #888;}  

大家有兴趣可以去我们的官网(www.zhinengshe.com)看看,那里还有很多demo可以看,也欢迎大家加入我们的QQ群,一起交流讨论.



来自 http://www.zhinengshe.com/works/3519/css3_fuzzy_text_effect.html

演示见 http://www.zhinengshe.com/works/3519/zns_demo.html

演示源代码 见 附件 demo.zip

附件大小
Package icon demo.zip7.2 KB
普通分类: