CSS实现雷达效果

CSS代码
来源：站三界导航
55阅读
2022-09-11

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .wave {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 2px solid #fff;
    text-align: center;
    line-height: 100px;
    color: #fff;
    background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
    background-size: 100%;
    animation: wave 4s linear infinite;
  }

  @keyframes wave {
    0% {
      box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
    }

    50% {
      box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
    }

    100% {
      box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
    }
  }
</style>
<div class="wave"></div>

</html>

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/10201.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇： css奇数偶数选择器

下一篇： a标签链接功能大全