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

最新推荐文章于 2024-04-12 09:30:07 发布

枯城旧梦

最新推荐文章于 2024-04-12 09:30:07 发布

阅读量196

点赞数

文章标签： html

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Hermit_k/article/details/113744293

版权

这段CSS代码展示了如何创建一个动态的雷达扫描效果和闪屏效果。雷达扫描使用了`RadarFast`类，通过关键帧动画实现了圆形阴影从小到大的渐显渐隐。而闪屏效果则是通过`twinkle`元素，利用背景颜色的透明度变化产生闪烁效果。

摘要由CSDN通过智能技术生成

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