效果示例
代码示例
有不懂的可以在评论区询问博主
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>波浪背景动画</title><style>body {margin: auto;font-family: -apple-system, BlinkMacSystemFont, sans-serif;overflow: auto;background: linear-gradient(315deg, rgba(101, 0, 94, 1) 3%, rgba(60, 132, 206, 1) 38%, rgba(48, 238, 226, 1) 68%, rgba(255, 25, 25, 1) 98%);animation: gradient 15s ease infinite;background-size: 400% 400%;background-attachment: fixed;}@keyframes gradient {0% {background-position: 0% 0%;}50% {background-position: 100% 100%;}100% {background-position: 0% 0%;}}.wave {background: rgb(255 255 255 / 25%);/* background: rgba(255, 255,255, .1); */border-radius: 1000% 1000% 0 0;position: fixed;width: 200%;height: 12em;animation: wave 10s -3s linear infinite;transform: translate3d(0, 0, 0);opacity: 0.8;bottom: 0;left: 0;z-index: -1;}.wave:nth-of-type(2) {bottom: -1.25em;animation: wave 18s linear reverse infinite;opacity: 0.8;}.wave:nth-of-type(3) {bottom: -2.5em;animation: wave 20s -1s reverse infinite;opacity: 0.9;}@keyframes wave {2% {transform: translateX(1);}25% {transform: translateX(-25%);}50% {transform: translateX(-50%);}75% {transform: translateX(-25%);}100% {transform: translateX(1);}}</style>
</head><body><div><div class="wave"></div><div class="wave"></div><div class="wave"></div></div>
</body></html>
本文发布于:2024-01-31 19:02:28，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170669895130677.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
