菜单 搜索
首页 前端知识 纯css制作声波扩散动画、js css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码

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

2025-02-27 11:02:07 前端知识 前端哥 25 894 我要收藏

一、纯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>
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/21709.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

监听其他音频播放时暂停正在播放的音频

2025-02-28 12:02:48

[Java基础]单元测试

2025-02-28 12:02:48

矩阵碰一碰发视频之 API 接口接入技术开发全解析，支持OEM

2025-02-28 12:02:47

pyrender 自动计算相机 pose

2025-02-28 12:02:47

【音视频】编解码相关概念总结

2025-02-28 12:02:47

cv2.solvePnP 报错 求相机位姿

2025-02-28 12:02:47

高清下载油管视频到本地

2025-02-28 12:02:46

websocket

2025-02-28 12:02:46

光谱相机的市场发展趋势

2025-02-28 12:02:46

[ISP] AE 自动曝光

2025-02-28 12:02:45

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！