运维开发网

【Golang语言社区】前端编程-利用CSS3实现雷达扫描效果图特效

运维开发网 https://www.qedev.com 2021-02-26 09:17 出处:51CTO 作者:mb5fdb0a1b25659
效果图<!DOCTYPE html><html><head>  <meta charset="UTF-8" />  <title>round</title>  <style type="text/css">  .round {    border: 1px solid rgba(255, 255, 255, 0.5

效果图

【Golang语言社区】前端编程-利用CSS3实现雷达扫描效果图特效

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4.   <meta charset="UTF-8" />

  5.   <title>round</title>

  6.   <style type="text/css">

  7.   .round {

  8.     border: 1px solid rgba(255, 255, 255, 0.5);

  9.     margin: 50px auto;

  10. }

  11. .w300 {

  12.     border-radius: 298px;

  13.     height: 298px;

  14.     margin-top: 0;

  15.     overflow: hidden;

  16.     width: 298px;

  17. }

  18. .w200 {

  19.     border-radius: 200px;

  20.     height: 200px;

  21.     width: 200px;

  22. }

  23. .w100 {

  24.     border-radius: 100px;

  25.     height: 100px;

  26.     width: 100px;

  27. }

  28. .w1 {

  29.     background-color: #fff;

  30.     border-radius: 1px;

  31.     height: 1px;

  32.     position: relative;

  33.     top: -4px;

  34.     width: 1px;

  35. }

  36. .line {

  37.     background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)) repeat scroll 0 0;

  38.     border-left: 1px solid rgba(255, 255, 255, 0.6);

  39.     border-radius: 0 0 150px;

  40.     height: 150px;

  41.     left: 0;

  42.     position: absolute;

  43.     top: 0;

  44.     transform: rotate(0deg);

  45.     transform-origin: 0 0 0;

  46.     width: 150px;

  47. }

  48. .roundMove {

  49.     animation: 3s linear 0s normal both infinite running round;

  50. }

  51. @keyframes round {

  52. 100% {

  53.     transform: rotate(360deg);

  54. }

  55. }

  56. @keyframes round {

  57. 100% {

  58.     transform: rotate(360deg);

  59. }

  60. }

  61.   </style>

  62. </head>

  63. <body style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; margin: 0px;">

  64.   <div class="round w300">

  65.         <div class="round w200">

  66.             <div class="round w100">

  67.                 <div class="round w1">

  68.                     <div class="line roundMove"></div>

  69.                 </div>

  70.             </div>

  71.         </div>

  72.     </div>

  73. </body>

  74. </html>

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号