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

标签：opacity,scale,效果,100%,50%,transform,Fast,html,闪屏
来源： https://blog.csdn.net/Hermit_k/article/details/113744293