html 类似雷达扫描效果 及 闪屏效果

//雷达扫描效果
 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;}}