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

//雷达扫描效果
 1 <em id="Radar" class="RadarFast"></em>

 css:
 .RadarFast{
     position: absolute;
     z-index: 10;
     bottom: 140px;
     left: 50%;
     margin-left: -3px;
 }
 .RadarFast:after{
     content: '';
     position: absolute;
     width: 280px;
     height: 280px;
     border-radius: 50%;
     box-shadow: 0 0 30px 10px rgba(254,62,166,0.8);
     top: 50%;
     left: 50%;
     margin-left: -140px;
     z-index: 3;
     opacity: 0;
     -webkit-animation: Fast 0.5s 0.5s infinite ease-out;
     -moz-animation: Fast 0.5s 0.5s infinite ease-out;
     animation: Fast 0.5s 0.5s infinite ease-out;
 }
 @-webkit-keyframes Fast {
     0% {opacity: 0;-webkit-transform: scale(0.1);}
     50% {opacity: 1;}
     100%{opacity: 0;-webkit-transform: scale(1.2);}
 }
 @-moz-keyframes Fast {
     0% { opacity: 0; -moz-transform: scale(0.1); }
     50% { opacity: 1; }
     100%{ opacity: 0; -moz-transform: scale(1.2); }
 }
 @-ms-keyframes Fast {
     0% { opacity: 0; }
     50% { opacity: 1; }
     100%{opacity: 0; }
 }
 @-o-keyframes Fast {
     0% { opacity: 0; -o-transform: scale(0.1); }
     50% {opacity: 1; }
     100%{ opacity: 0;-o-transform: scale(1.2); }
 }
 @keyframes Fast {
     0% { opacity: 0; transform: scale(0.1); }
     50% {opacity: 1; }
     100%{opacity: 0;transform: scale(1.2); }
 }

 //闪屏效果
 <div id="twinkle"></div>

 css:
 #twinkle{
     position: fixed;
     width: 100%;
     height: 100%;
     top:0;
     left: 0;
     display: none;
     background:rgba(254,62,166,0.6);
     z-index: 50;
     -webkit-animation: Bgs 0.5s infinite ease-in-out;
 }
 @-webkit-keyframes Bgs {
     0% {opacity: 0;}
     50% {opacity: 1;}
     100%{opacity: 0;}}