当前位置：首页 > article >正文

纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码

article 2024/11/14 11:44:54

一、纯css制作声波扩散动画

参考文章：纯css制作声波扩散动画

播放效果通过音频状态来控制

效果如下

在这里插入图片描述

完整代码：

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

<head>
    <meta charset="UTF-8">
    <title>波纹动画特效</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: #51c77d;
        }

        .animation {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #fff;
            top: 50%;
            left: 50%;
            border: 3px solid rgba(0, 0, 0, 0.1);
            animation: rotate 10s linear infinite;
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }

        .animation:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid #fff;
            border-radius: 50%;
            /*border-image:url(https://www.w3school.com.cn/i/border.png) 30 30 10 stretch;*/
            /*background-color: transparent;*/
            /*background-image: url(https://www.w3school.com.cn/i/border.png);*/
            /*background-clip:border-box;*/
            /*background-repeat:no-repeat;*/
            opacity: 0;
            animation: ripple 2s linear 1s infinite;
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }

        .animation:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid #fff;
            border-radius: 50%;
            /*border-image:url(https://www.w3school.com.cn/i/border.png) 30 30 10 stretch; !*round repeat stretch*!*/
            /*background-image: url(https://www.w3school.com.cn/i/border.png) ;*/
            /*background-clip:border-box;*/
            /*background-repeat:no-repeat;*/
            /*background-color: transparent;*/
            opacity: 0;
            animation: ripple 2s linear infinite;
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }

        .ripple {
            animation-play-state: running;
            -webkit-animation-play-state: running;
        }

        .ripple:before {
            animation-play-state: running;
            -webkit-animation-play-state: running;
        }

        .ripple:after {
            animation-play-state: running;
            -webkit-animation-play-state: running;
        }

        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: 0.0;
            }

            25% {
                transform: scale(1.25);
                opacity: 0.1;
            }

            50% {
                transform: scale(1.5);
                opacity: 0.3;
            }

            75% {
                transform: scale(1.75);
                opacity: 0.5;
            }

            100% {
                transform: scale(2);
                opacity: 0.0;
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(90deg);
            }

            50% {
                transform: rotate(180deg);
            }

            75% {
                transform: rotate(270deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        #play {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 4px;
            color: #fff;
            border: 1px solid #fff;
            margin-top: 15px;
            cursor: pointer;
        }

        #pause {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 4px;
            color: #fff;
            border: 1px solid #fff;
            margin-top: 15px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="animation ">
        <img style="display: block; width: 100%; height: 100%; border-radius: 50%;"
            src="http://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg?param=300x300">
        <audio id="audio" src="http://music.163.com/song/media/outer/url?id=513360721.mp3" preload="load">您的浏览器不支持 audio
            标签。</audio>
    </div>
    <div id="play">播放</div>
    <div id="pause">暂停</div>
    <script>
        document.getElementById("play").onclick = function () {
            document.querySelector(".animation").classList.add("ripple");
            document.querySelector("#audio").play();
        };
        document.getElementById("pause").onclick = function () {
            document.querySelector(".animation").classList.remove("ripple");
            document.querySelector("#audio").pause();
        }
    </script>
</body>

</html>

二、js+css3波纹催眠动画特效

参考文章：JavaScript+css3波纹催眠动画特效

效果如下

在这里插入图片描述

完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js+css3波纹催眠动画特效</title>

<style>
:root {
  --r: 17;
  --g: 206;
  --b: 142;
  --bg: #121212;
}

html {
  background: var(--bg);
  -webkit-transition: background 2s ease-in-out;
  transition: background 2s ease-in-out;
}

.circle {
  --scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  -webkit-animation: pulse 3s infinite ease-in-out;
          animation: pulse 3s infinite ease-in-out;
  -webkit-transition: background 2s ease-in-out;
  transition: background 2s ease-in-out;
  /* apparently having using var in rgb breaks sass... */
  background: rgb(var(--r), var(--g), var(--b));
  mix-blend-mode: luminosity;
}

/* 
support for FF :sob: 
FF doesn't support calc
in animation delay or opacity
so I can't use a for loop:
https://bugzilla.mozilla.org/show_bug.cgi?id=1318305
...I'm not proud of this
*/
.circle--1 {
  opacity: 1;
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}
.circle--2 {
  opacity: 0.5;
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}
.circle--3 {
  opacity: 0.3333;
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}
.circle--4 {
  opacity: 0.25;
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}
.circle--5 {
  opacity: 0.2;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.circle--6 {
  opacity: 0.1666;
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
}

.circle--1 {
  --size: calc(50px * 1);
}

@media (min-width: 700px) {

  .circle--1 {
    --size: calc(7vw * 1);
  }
}

@media (min-width: 1000px) {

  .circle--1 {
    --size: calc(70px * 1);
  }
}

.circle--2 {
  --size: calc(50px * 2);
}

@media (min-width: 700px) {

  .circle--2 {
    --size: calc(7vw * 2);
  }
}

@media (min-width: 1000px) {

  .circle--2 {
    --size: calc(70px * 2);
  }
}

.circle--3 {
  --size: calc(50px * 3);
}

@media (min-width: 700px) {

  .circle--3 {
    --size: calc(7vw * 3);
  }
}

@media (min-width: 1000px) {

  .circle--3 {
    --size: calc(70px * 3);
  }
}

.circle--4 {
  --size: calc(50px * 4);
}

@media (min-width: 700px) {

  .circle--4 {
    --size: calc(7vw * 4);
  }
}

@media (min-width: 1000px) {

  .circle--4 {
    --size: calc(70px * 4);
  }
}

.circle--5 {
  --size: calc(50px * 5);
}

@media (min-width: 700px) {

  .circle--5 {
    --size: calc(7vw * 5);
  }
}

@media (min-width: 1000px) {

  .circle--5 {
    --size: calc(70px * 5);
  }
}

.circle--6 {
  --size: calc(50px * 6);
}

@media (min-width: 700px) {

  .circle--6 {
    --size: calc(7vw * 6);
  }
}

@media (min-width: 1000px) {

  .circle--6 {
    --size: calc(70px * 6);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  
  25% {
    -webkit-transform: translate(-50%, -50%) scale(1.3);
            transform: translate(-50%, -50%) scale(1.3);
  }
  
  50% {
    -webkit-transform: translate(-50%, -50%) scale(0.70);
            transform: translate(-50%, -50%) scale(0.70);
  }
  
  75% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  
  25% {
    -webkit-transform: translate(-50%, -50%) scale(1.3);
            transform: translate(-50%, -50%) scale(1.3);
  }
  
  50% {
    -webkit-transform: translate(-50%, -50%) scale(0.70);
            transform: translate(-50%, -50%) scale(0.70);
  }
  
  75% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}


</style>

</head>
<body>

<div class='circle circle--1'></div>
<div class='circle circle--2'></div>
<div class='circle circle--3'></div>
<div class='circle circle--4'></div>
<div class='circle circle--5'></div>
<div class='circle circle--6'></div>

<script type="text/javascript">
function getRandomNumber() {
  return Math.floor(Math.random() * 255);
}

function getBrightness(r, b, g) {
  // brightness calculation from http://alienryderflex.com/hsp.html
  return Math.sqrt(
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
  );
}

setInterval(()=> {
  const r = getRandomNumber(),
        g = getRandomNumber(),
        b = getRandomNumber(),
        brightness = getBrightness(r,g,b);
  
  document.documentElement.style.setProperty(`--r`, r);
  document.documentElement.style.setProperty(`--g`, g);
  document.documentElement.style.setProperty(`--b`, b);
  
  let bgColor;
  if (brightness > 40) {
    bgColor = '#121212';
  } else {
    bgColor = '#BDBCBF';
  }
  document.documentElement.style.setProperty(`--bg`, bgColor);
}, 2000);
</script>


</body>
</html>

三、【css3动画】圆波扩散效果

由实心圆点向四周扩散（有阴影）

效果如下

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3动画圆波扩散效果</title>
    <style>
        @keyframes warn {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                opacity: 0.0;
            }
        }

        @keyframes warn1 {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }

        .container {
            position: relative;
            width: 120px;
            height: 120px;
            left: 10px;
            top: 10px;
        }

        /* 保持大小不变的小圆点 */
        .dot {
            position: absolute;
            width: 7px;
            height: 7px;
            left: 134px;
            top: 134px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: 1px solid #33ccff;
            border-radius: 50%;
            background-color: #33ccff;
            /* 实心圆 ，如果没有这个就是一个小圆圈 */
            z-index: 2;
        }

        /* 产生动画（向外扩散变大）的圆圈 第一个圆 */
        .pulse {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 120px;
            top: 120px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 2s ease-out;
            -moz-animation: warn 2s ease-out;
            animation: warn 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #3399ff;
            /* 阴影效果 */
        }

        /* 产生动画（向外扩散变大）的圆圈 第二个圆 */
        .pulse1 {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 120px;
            top: 120px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn1 2s ease-out;
            -moz-animation: warn1 2s ease-out;
            animation: warn1 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #3399ff;
            /* 阴影效果 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="dot"></div>
        <div class="pulse"></div>
        <div class="pulse1"></div>
    </div>
</body>

</html>

由实心圆点向四周扩散（无阴影）

效果如下

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3动画圆波扩散效果</title>
    <style>
        @keyframes warn {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                opacity: 0.0;
            }
        }

        @keyframes warn1 {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }

        .container {
            position: relative;
            width: 120px;
            height: 120px;
            left: 10px;
            top: 10px;
        }

        /* 保持大小不变的小圆点 */
        .dot {
            position: absolute;
            width: 7px;
            height: 7px;
            left: 134px;
            top: 134px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: 1px solid #33ccff;
            border-radius: 50%;
            background-color: #33ccff;
            /* 实心圆 ，如果没有这个就是一个小圆圈 */
            z-index: 2;
        }

        /* 产生动画（向外扩散变大）的圆圈 第一个圆 */
        .pulse {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 120px;
            top: 120px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 2s ease-out;
            -moz-animation: warn 2s ease-out;
            animation: warn 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        /* 产生动画（向外扩散变大）的圆圈 第二个圆 */
        .pulse1 {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 120px;
            top: 120px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn1 2s ease-out;
            -moz-animation: warn1 2s ease-out;
            animation: warn1 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="dot"></div>
        <div class="pulse"></div>
        <div class="pulse1"></div>
    </div>
</body>

</html>

由空心圆圈向四周扩散（有阴影）

效果如下

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3动画圆波扩散效果</title>
    <style>
        @keyframes warn {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                opacity: 0.0;
            }
        }

        @keyframes warn1 {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }

        .container {
            position: relative;
            width: 120px;
            height: 120px;
            left: 10px;
            top: 10px;
        }

        /* 保持大小不变的小圆圈 */
        .dot {
            position: absolute;
            width: 7px;
            height: 7px;
            left: 134px;
            top: 134px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: 1px solid #33ccff;
            border-radius: 50%;
            z-index: 2;
        }

        /* 产生动画（向外扩散变大）的圆圈 第一个圆 */
        .pulse {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 120px;
            top: 120px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 2s ease-out;
            -moz-animation: warn 2s ease-out;
            animation: warn 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #3399ff;
            /* 阴影效果 */
        }

        /* 产生动画（向外扩散变大）的圆圈 第二个圆 */
        .pulse1 {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 120px;
            top: 120px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn1 2s ease-out;
            -moz-animation: warn1 2s ease-out;
            animation: warn1 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #3399ff;
            /* 阴影效果 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="dot"></div>
        <div class="pulse"></div>
        <div class="pulse1"></div>
    </div>
</body>

</html>

由空心圆圈向四周扩散（无阴影）

效果如下

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3动画圆波扩散效果</title>
    <style>
        @keyframes warn {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                opacity: 0.0;
            }
        }

        @keyframes warn1 {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }

        .container {
            position: relative;
            width: 120px;
            height: 120px;
            left: 10px;
            top: 10px;
        }

        /* 保持大小不变的小圆圈 */
        .dot {
            position: absolute;
            width: 7px;
            height: 7px;
            left: 134px;
            top: 134px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: 1px solid #33ccff;
            border-radius: 50%;
            z-index: 2;
        }

        /* 产生动画（向外扩散变大）的圆圈 第一个圆 */
        .pulse {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 120px;
            top: 120px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 2s ease-out;
            -moz-animation: warn 2s ease-out;
            animation: warn 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        /* 产生动画（向外扩散变大）的圆圈 第二个圆 */
        .pulse1 {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 120px;
            top: 120px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn1 2s ease-out;
            -moz-animation: warn1 2s ease-out;
            animation: warn1 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="dot"></div>
        <div class="pulse"></div>
        <div class="pulse1"></div>
    </div>
</body>

</html>

查看全文

http://www.kler.cn/a/389290.html