css实现波纹扩散效果

最新推荐文章于 2024-07-24 11:47:23 发布

halo1416

最新推荐文章于 2024-07-24 11:47:23 发布

阅读量4.4k

点赞数 2

分类专栏：其他（html/css...) 文章标签： css css3 html

本文链接：https://blog.csdn.net/halo1416/article/details/122855520

版权

其他（html/css...) 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、实现效果

请添加图片描述

二、实现代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-casle=1.0,user-scalable=no" />
  <title>圆点扩散</title>
  <style type="text/css">
    body {
      background: #444;
    }

    .logo {
      width: 80px;
      height: 80px;
      background: #fff;
      text-align: center;
      line-height: 80px;
      border-radius: 50%;
      position: absolute;
      top: 310px;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 9;
    }

    .animate-wave {
      width: 500px;
      height: 500px;
      position: absolute;
      top: 100px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }

    @-webkit-keyframes opac {
      from {
        opacity: 1;
        width: 0;
        height: 0;
        top: 50%;
        left: 50%;
      }

      to {
        opacity: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }

    .animate-wave * {
      background: #fcc;
      position: absolute;
      border-radius: 50%;
      animation: opac 6s infinite;
    }

    .animate-wave .w2 {
      animation-delay: 1s;
    }

    .animate-wave .w3 {
      animation-delay: 2s;
    }

    .animate-wave .w4 {
      animation-delay: 3s;
    }

    .animate-wave .w5 {
      animation-delay: 4s;
    }

    .animate-wave .w6 {
      animation-delay: 5s;
    }
  </style>

</head>

<body>
  <div class="logo">LOGO</div>
  <div class="animate-wave">
    <div class="w1"></div>
    <div class="w2"></div>
    <div class="w3"></div>
    <div class="w4"></div>
    <div class="w5"></div>
    <div class="w6"></div>
  </div>
</body>

</html>