当前位置：网站首页>【无标题】

【无标题】

2022-08-09 02:30:00 【JiuMeilove】

效果示例
在这里插入图片描述
代码示例

<!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>
原网站

版权声明
本文为[JiuMeilove]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_44368963/article/details/126219036

边栏推荐

猜你喜欢

随机推荐