css3 属性filter应用在项目里.
- 语法：
- <filter>：
- 要使用的滤镜效果。多个滤镜之间用空格隔开。
- 设置或检索对象所应用的滤镜效果。 最常用的滤镜效果是不透明效果，如果要实现50%的不透明度（其它高级浏览器的实现参阅opacity）：
- 实例：
- HTML：
-
View Code1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css3-图形挤压变形动画特效</title> 5 <meta charset = "utf-8"> 6 <link rel="stylesheet" type="text/css" href="css3-3d-image.css"> 7 </head> 8 9 <body> 10 <div class="box"> 11 <span></span> 12 <span></span> 13 <span></span> 14 <span></span> 15 <span></span> 16 <span></span> 17 <span></span> 18 <span></span> 19 <span></span> 20 <span></span> 21 <span></span> 22 <span></span> 23 <span></span> 24 <span></span> 25 <span></span> 26 <span></span> 27 <span></span> 28 <span></span> 29 <span></span> 30 <span></span> 31 <span></span> 32 <span></span> 33 <span></span> 34 <span></span> 35 <span></span> 36 <span></span> 37 <span></span> 38 <span></span> 39 <span></span> 40 <span></span> 41 <span></span> 42 <span></span> 43 <span></span> 44 <span></span> 45 <span></span> 46 <span></span> 47 <span></span> 48 <span></span> 49 <span></span> 50 <span></span> 51 <span></span> 52 <span></span> 53 <span></span> 54 <span></span> 55 <span></span> 56 <span></span> 57 <span></span> 58 <span></span> 59 <span></span> 60 <span></span> 61 <span></span> 62 <span></span> 63 <span></span> 64 <span></span> 65 <span></span> 66 <span></span> 67 <span></span> 68 <span></span> 69 <span></span> 70 <span></span> 71 <span></span> 72 <span></span> 73 <span></span> 74 <span></span> 75 <span></span> 76 <span></span> 77 <span></span> 78 <span></span> 79 <span></span> 80 <span></span> 81 <i class = "repulse"></i> 82 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" ></script> 83 <script> 84 $(document).on('mousemove', function(event) { 85 $(".repulse").css({ 86 left:event.pageX, 87 top:event.pageY 88 }); 89 }); 90 </script> 91 </body> 92 </html>
css:
View Code1 html { 2 background:linear-gradient(#fe4 0%, #040 80%); 3 height:120%; 4 } 5 .box { 6 display:inline-block; 7 width:1220px; 8 marign:0 auto; 9 background-color:#000; 10 -webkit-filter:blur(15px) saturate(400%); 11 cursor:none; 12 transform-style:preserve-3d; 13 } 14 .box:after { 15 clear:both; 16 content:''; 17 display:block; 18 overflow:hidden; 19 } 20 .box .repulse { 21 display:block; 22 width:80px; 23 height:60px; 24 background:#add8e6; 25 position: absolute; 26 border-radius:100%; 27 -webkit-filter:saturate(300%); 28 } 29 .box span { 30 float:left; 31 width:80px; 32 height:60px; 33 border-radius:100%; 34 background-color:#f00; 35 margin:20px; 36 transform:translateZ(0px); 37 }
效果图：
查看源码：github/Qboooogle
