登录
没有账号?注册

      阅读隐私协议      忘记密码 ?

注册
已有账号?登录

已阅读并同意“ 用户服务协议

访客,你好!
×
本站自主开发的[CMS网站快速搭建系统]现已开放低价可购买,支持多行业快速个性化定制服务。

CSS3实现的雷达扫描动画特效

效果图(实际效果为动画):

完整代码:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”>  
  5. <meta http-equiv=“X-UA-Compatible” content=“IE=Edge”>  
  6. <meta name=“viewport” content=“width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0”>  
  7. <title>地球自转代码纯css3动画特效</title>  
  8. <style>  
  9. *{box-sizing:border-box}  
  10. html{height:100%;background-color:#111;font-size:10px}  
  11. body{background-image:linear-gradient(0deg,transparent 24%,rgba(32,255,77,0.15) 25%,rgba(32,255,77,0.15) 26%,transparent 27%,transparent 74%,rgba(32,255,77,0.15) 75%,rgba(32,255,77,0.15) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32,255,77,0.15) 25%,rgba(32,255,77,0.15) 26%,transparent 27%,transparent 74%,rgba(32,255,77,0.15) 75%,rgba(32,255,77,0.15) 76%,transparent 77%,transparent);background-size:7rem 7rem;background-position:-5.2rem -5.2rem;width:100%;height:100%;position:relative;padding:0;margin:0;font-size:1.6rem}  
  12. .radar{background:-webkit-radial-gradient(center,rgba(32,255,77,0.3) 0,rgba(32,255,77,0) 75%),-webkit-repeating-radial-gradient(rgba(32,255,77,0) 5.8%,rgba(32,255,77,0) 18%,#20ff4d 18.6%,rgba(32,255,77,0) 18.9%),-webkit-linear-gradient(90deg,rgba(32,255,77,0) 49.5%,#20ff4d 50%,#20ff4d 50%,rgba(32,255,77,0) 50.2%),-webkit-linear-gradient(0deg,rgba(32,255,77,0) 49.5%,#20ff4d 50%,#20ff4d 50%,rgba(32,255,77,0) 50.2%);background:radial-gradient(center,rgba(32,255,77,0.3) 0,rgba(32,255,77,0) 75%),repeating-radial-gradient(rgba(32,255,77,0) 5.8%,rgba(32,255,77,0) 18%,#20ff4d 18.6%,rgba(32,255,77,0) 18.9%),linear-gradient(90deg,rgba(32,255,77,0) 49.5%,#20ff4d 50%,#20ff4d 50%,rgba(32,255,77,0) 50.2%),linear-gradient(0deg,rgba(32,255,77,0) 49.5%,#20ff4d 50%,#20ff4d 50%,rgba(32,255,77,0) 50.2%);width:75vw;height:75vw;max-height:75vh;max-width:75vh;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:.2rem solid #20ff4d;overflow:hidden}  
  13. .radar:before{content:’ ‘;display:block;position:absolute;width:100%;height:100%;border-radius:50%;animation:blips 5s infinite;animation-timing-function:linear;animation-delay:1.4s}  
  14. .radar:after{content:’ ‘;display:block;background-image:linear-gradient(44deg,rgba(0,255,51,0) 50%,#0f3 100%);width:50%;height:50%;position:absolute;top:0;left:0;animation:radar-beam 5s infinite;animation-timing-function:linear;transform-origin:bottom right;border-radius:100% 0 0 0}  
  15. @keyframes radar-beam{0%{transform:rotate(0deg)}  
  16. 100%{transform:rotate(360deg)}  
  17. }  
  18. @keyframes blips{14%{background:radial-gradient(2vmin circle at 75% 70%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%)}  
  19. 14.0002%{background:radial-gradient(2vmin circle at 75% 70%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%),radial-gradient(2vmin circle at 63% 72%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%)}  
  20. 25%{background:radial-gradient(2vmin circle at 75% 70%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%),radial-gradient(2vmin circle at 63% 72%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%),radial-gradient(2vmin circle at 56% 86%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%)}  
  21. 26%{background:radial-gradient(2vmin circle at 75% 70%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%),radial-gradient(2vmin circle at 63% 72%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%),radial-gradient(2vmin circle at 56% 86%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%);opacity:1}  
  22. 100%{background:radial-gradient(2vmin circle at 75% 70%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%),radial-gradient(2vmin circle at 63% 72%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%),radial-gradient(2vmin circle at 56% 86%,#fff 10%,#20ff4d 30%,rgba(255,255,255,0) 100%);opacity:0}  
  23. }  
  24. </style>  
  25. </head>  
  26. <body>  
  27. <div class=“radar”></div>  
  28. </body>  
  29. </html>  

上一个

下一个

相关内容

评论数 0

爱心数 3

心碎数 0

有图片 1 张,文字 3762

预计完成阅读需要 11 分钟

累计已有 82 次来访

| |