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

原文地址：https://www.cnblogs.com/hermitks/p/10302037.html