css3 filter屬性在項目中的應用

時間 2019-12-05

標籤 css3 css filter 屬性項目應用欄目 CSS 简体版

原文原文鏈接

css3 屬性filter應用在項目裏.javascript

語法：

<filter>：

要使用的濾鏡效果。多個濾鏡之間用空格隔開。

設置或檢索對象所應用的濾鏡效果。 最經常使用的濾鏡效果是不透明效果，若是要實現50%的不透明度（其它高級瀏覽器的實現參閱 opacity）：

實例：

HTML：

 1 <!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>

View Code

css:css

 1 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 }