//雷达扫描效果
1 <em id="Radar" class="RadarFast"></em>
2
3 css:
4 .RadarFast{
5 position: absolute;
6 z-index: 10;
7 bottom: 140px;
8 left: 50%;
9 margin-left: -3px;
10 }
11 .RadarFast:after{
12 content: '';
13 position: absolute;
14 width: 280px;
15 height: 280px;
16 border-radius: 50%;
17 box-shadow: 0 0 30px 10px rgba(254,62,166,0.8);
18 top: 50%;
19 left: 50%;
20 margin-left: -140px;
21 z-index: 3;
22 opacity: 0;
23 -webkit-animation: Fast 0.5s 0.5s infinite ease-out;
24 -moz-animation: Fast 0.5s 0.5s infinite ease-out;
25 animation: Fast 0.5s 0.5s infinite ease-out;
26 }
27 @-webkit-keyframes Fast {
28 0% {opacity: 0;-webkit-transform: scale(0.1);}
29 50% {opacity: 1;}
30 100%{opacity: 0;-webkit-transform: scale(1.2);}
31 }
32 @-moz-keyframes Fast {
33 0% { opacity: 0; -moz-transform: scale(0.1); }
34 50% { opacity: 1; }
35 100%{ opacity: 0; -moz-transform: scale(1.2); }
36 }
37 @-ms-keyframes Fast {
38 0% { opacity: 0; }
39 50% { opacity: 1; }
40 100%{opacity: 0; }
41 }
42 @-o-keyframes Fast {
43 0% { opacity: 0; -o-transform: scale(0.1); }
44 50% {opacity: 1; }
45 100%{ opacity: 0;-o-transform: scale(1.2); }
46 }
47 @keyframes Fast {
48 0% { opacity: 0; transform: scale(0.1); }
49 50% {opacity: 1; }
50 100%{opacity: 0;transform: scale(1.2); }
51 }
1 //闪屏效果
2 <div id="twinkle"></div>
3
4 css:
5 #twinkle{
6 position: fixed;
7 width: 100%;
8 height: 100%;
9 top:0;
10 left: 0;
11 display: none;
12 background:rgba(254,62,166,0.6);
13 z-index: 50;
14 -webkit-animation: Bgs 0.5s infinite ease-in-out;
15 }
16 @-webkit-keyframes Bgs {
17 0% {opacity: 0;}
18 50% {opacity: 1;}
19 100%{opacity: 0;}}