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