css 波浪动画

青田。

已于 2022-07-02 11:14:00 修改

阅读量309

点赞数

分类专栏： html css 文章标签： html css 动画

于 2022-07-02 11:09:19 首次发布

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125570532

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

一、效果

二、HTML

<body>
	<div class="wave">
		<div style="--a1:0.5s; --a2:3.5s"></div>
		<div style="--a1:1s; --a2:4s"></div>
		<div style="--a1:1.5s; --a2:4.5s"></div>
		<div style="--a1:2s; --a2:5s"></div>
		<div style="--a1:2.5s; --a2:5.5s"></div>
		<div style="--a1:3s; --a2:6s"></div>
		<div style="--a1:3.5s; --a2:6.5s"></div>
		<div style="--a1:4s; --a2:7s"></div>
		<div style="--a1:4.5s; --a2:7.5s"></div>
		<div style="--a1:5s; --a2:8s"></div>
		<div style="--a1:5.5s; --a2:8.5s"></div>
		<div style="--a1:6s; --a2:9s"></div>
		<div style="--a1:6.5s; --a2:9.5s"></div>
		<div style="--a1:7s; --a2:10s"></div>
		<div style="--a1:7.5s; --a2:10.5s"></div>
		<div style="--a1:8s; --a2:11s"></div>
		<div style="--a1:8.5s; --a2:11.5s"></div>
		<div style="--a1:9s; --a2:12s"></div>
		<div style="--a1:9.5s; --a2:12.5s"></div>
		<div style="--a1:10s; --a2:13s"></div>
		<div style="--a1:10.5s; --a2:13.5s"></div>
		<div style="--a1:11s; --a2:14s"></div>
		<div style="--a1:11.5s; --a2:14.5s"></div>
	</div>
</body>

三、css样式

<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 100vh;
			overflow: hidden;
			background: url(http://img.netbian.com/file/20110414/69974393d6c9fc17e6f17712fea189ea.jpg) no-repeat;
		}
		.wave{
			display: flex;
			filter: drop-shadow(120px 0 rgba(40, 95, 121, 0.5));
			position: absolute;
			bottom: 0;
		}
		.wave div {
			position: relative;
			width: 40px;
			height: 200px;
			margin: 10px;
			border-radius: 3px;
			overflow: hidden;
		}
		.wave div::before{
			content: "";
			width: 300%;
			height: 100%;
			background-color: rgb(87, 105, 122);
			position: absolute;
			left: -100%;
			top: 50%;
			animation: upDown 2s cubic-bezier(0.445,0.05,0.55,0.95) infinite alternate,
			wave 2s cubic-bezier(0.445,0.05,0.55,0.95) infinite alternate;
			animation-delay: var(--a1), var(--a2);
		}
		@keyframes upDown {
			0%{
				top: 70%;
			}
			100%{
				top: 30%;
			}
		}
		@keyframes wave {
			0%{
				transform: rotateZ(-20deg);
			}
			100%{
				transform: rotateZ(20deg);
			}
		}
	</style>