一、纯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.htmlreturn 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>