欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > IT业 > css模拟雷达扫描动画

css模拟雷达扫描动画

2025/3/16 23:38:31 来源:https://blog.csdn.net/emmmmmmm__/article/details/146262422  浏览:    关键词:css模拟雷达扫描动画
      <div class="radar-scan"><div class="radar-container" /></div>

样式:

  .radar-scan {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: 2rem 2rem;width: 200px;height: 200px;position: relative;padding: 0;margin: 0;font-size: 1.6rem;}.radar-container {// 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%//   );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%);width: 200px;height: 200px;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 50%;border: 0.2rem solid #0cdd36;overflow: hidden;}.radar-container:before {content: " ";display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;animation: scanSpot 5s infinite;animation-timing-function: linear;animation-delay: 1.4s;}.radar-container:after {content: " ";display: block;background-image: linear-gradient(44deg,rgba(0, 255, 51, 0) 50%,#00bb22 100%);width: 50%;height: 50%;position: absolute;top: 0;left: 0;animation: scan 5s infinite;animation-timing-function: linear;transform-origin: bottom right;border-radius: 100% 0 0 0;}@keyframes scan {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes scanSpot {14% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);}14.0002% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 63% 72%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);}25% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 63% 72%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 56% 86%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);}26% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 63% 72%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 56% 86%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);opacity: 1;}100% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 63% 72%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 56% 86%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);opacity: 0;}}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词