1.首先设置背景为黑色，灯色为青色的呼吸灯样式，并设置动画的引入，自定义的动画名为myani和mayni1，由于内外圈的放大缩小程度不同，所以动画设置了两个
.father{box-sizing: border-box;width: 400px;height: 400px;background-color: black;position: relative;overflow: hidden;}.one{width:200px;height: 200px;border: 8px solid rgb(110, 184, 187);box-shadow: 0 0 10px rgb(141, 251, 255);background-color: transparent;border-radius: 50%;margin: 50px auto;overflow: hidden;animation-name: myani;animation-duration: 2s;animation-iteration-count: infinite;/* 动画执行方向 */animation-direction: alternate;/* 动画速度曲线 匀速 */animation-timing-function:linear;}.two{width: 100px;height: 100px;border: 15px solid rgb(102, 226, 226);border-radius: 50%;box-shadow: 0 0 10px cyan;/* position: absolute; */margin: 38px auto;animation-name: myani1;animation-duration: 2.5s;/* 循环次数为无限 */animation-iteration-count: infinite;/* 动画执行方向从头到尾再到头 */animation-direction: alternate-reverse;/* 动画速度曲线 匀速 */animation-timing-function:linear;}
2.代码中的box-shadow是设置灯的阴影，animation-duration是设置动画执行的时间，在动画的设置中间初始状态设置成透明度为0.7，然后将末状态设置透明度为1，transform：scale（变化的倍数）。这样可以让呼吸灯的颜色感觉由暗变亮，同时也可以在末状态用rgb调色，将颜色变化为另一种更亮的颜色也可以。如果希望颜色多过程变化，可以将form和to变为0%{}，50%{}，100%{}，由两阶段变为3阶段，需要更多阶段依次类推
@keyframes myani{/* 0% */from{opacity: 0.7;transform:scale(1);}to{opacity: 1;transform:scale(1.05);}}@keyframes myani1{/* 0% */0%{opacity: 0.7;transform:scale(1);}100%{opacity: 1;transform:scale(1.12);}}
最后附上全部代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>呼吸灯效果</title>
</head>
<style>*{margin: 0px;padding: 0px;}.father{box-sizing: border-box;width: 400px;height: 400px;background-color: black;position: relative;overflow: hidden;}.one{width:200px;height: 200px;border: 8px solid rgb(110, 184, 187);box-shadow: 0 0 10px rgb(141, 251, 255);background-color: transparent;border-radius: 50%;margin: 50px auto;overflow: hidden;animation-name: myani;animation-duration: 2s;animation-iteration-count: infinite;/* 动画执行方向 */animation-direction: alternate;/* 动画速度曲线 匀速 */animation-timing-function:linear;}.two{width: 100px;height: 100px;border: 15px solid rgb(102, 226, 226);border-radius: 50%;box-shadow: 0 0 10px cyan;/* position: absolute; */margin: 38px auto;animation-name: myani1;animation-duration: 2.5s;animation-iteration-count: infinite;/* 动画执行方向 */animation-direction: alternate-reverse;/* 动画速度曲线 匀速 */animation-timing-function:linear;}.three{width: 100px;height: 30px;position: absolute;text-align: center;color: skyblue;font-size: 40px;top: 300px;left: 150px;}@keyframes myani{/* 0% */from{opacity: 0.7;transform:scale(1);}to{opacity: 1;transform:scale(1.05);}}@keyframes myani1{/* 0% */from{opacity: 0.7;transform:scale(1);}to{opacity: 1;transform:scale(1.12);}}
</style>
<body><div class="father"><div class="one"><div class="two"> </div></div><div class="three"><b> Hi!</b></div></div>
</body>
</html>
本文发布于:2024-02-04 05:47:35，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170700353952765.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
