首页 > 代码库 > css3 filter属性在项目中的应用
css3 filter属性在项目中的应用
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.pageY88 });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
css3 filter属性在项目中的应用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。