原理其实很简单,就是一个选项卡的原理。然后再配合css3的一些属性,从而实现文字模糊。
兼容的浏览器:
IE: 9 (支持部分)
FireFox √
safari √
chrome √
opera √
body {background:#CCC;}
#ul1 {width:1040px; margin:40px auto;}
#ul1 li {width:200px; height:200px; background:white; float:left; margin:10px; list-style:none; padding:20px; box-shadow:2px 2px 2px #999; -webkit-transition:0.5s all linear;-moz-transition:0.5s all linear;-ms-transition:0.5s all linear;-o-transition:0.5s all linear;}
#ul1 li h2 {font-size:24px; line-height:40px;}
#ul1 li p {font-size:12px; line-height:18px;}
#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.8; color:rgba(0,0,0,0);}
#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群,一起交流讨论.