纯css实现波浪动画，超级简单

最新推荐文章于 2024-05-13 14:39:47 发布

与阳光握手言和

最新推荐文章于 2024-05-13 14:39:47 发布

阅读量1w

点赞数 7

分类专栏： html5 文章标签： html5 css 动画技术

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：之前在博客上看到一位大神用css实现的水波动画，真是受益匪浅，原来本以为要会svg、canvas等技术，原来根本不需要，只需css简短的十几行代码就可以达到效果。关键是大神的这种思路，非常之得我们学习，不多说了，直接上代码。

HTML部分：

<div class="container">
	<div class="wave"></div>
</div>

CSS部分：

.wave {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: rgb(118, 218, 255);
	border-radius: 50%;
}
.wave:before,
.wave:after{
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;
	top: 0;
	left: 50%;
	background-color: rgba(255, 255, 255, .4);
	border-radius: 45%;
	transform: translate(-50%, -70%) rotate(0);
	animation: rotate 6s linear infinite;
	z-index: 10;
}
.wave:after {
	border-radius: 47%;
	background-color: rgba(255, 255, 255, .9);
	transform: translate(-50%, -70%) rotate(0);
	animation: rotate 10s linear -5s infinite;
	z-index: 20;
}
@keyframes rotate {
	50% {
		transform: translate(-50%, -73%) rotate(180deg);
	} 100% {
		transform: translate(-50%, -70%) rotate(360deg);
	}
}

原理：

原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。

border-radius：用来设置边框圆角，当使用一个半径时确定一个圆形。

好的，如果 border-radius 没到 50%，但是接近 50% ，我们会得到一个这样的图形：

注意边角，整个图形给人的感觉是有点圆，却不是很圆。

好的，那整这么个图形又有什么用？还能变出波浪来不成？

没错！就是这么神奇。:) 我们让上面这个图形滚动起来(rotate) ，看看效果：

可能很多人看到这里还没懂旋转起来的意图，仔细盯着一边看，是会有类似波浪的起伏效果的。

而我们的目的，就是要借助这个动态变换的起伏动画，模拟制造出类似波浪的效果。

图中的虚线框就是我们实际的视野范围。

怎么样，看到这里是不是一下就打开思路了。

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wave {
		    position: relative;
		    width: 200px;
		    height: 200px;
		    background-color: rgb(118, 218, 255);
		    border-radius: 50%;
		}
		.wave:before,
		.wave:after{
	        	content: "";
	        	position: absolute;
	        	width: 400px;
	        	height: 400px;
	        	top: 0;
	        	left: 50%;
	        	background-color: rgba(255, 255, 255, .4);
	        	border-radius: 45%;
	        	transform: translate(-50%, -70%) rotate(0);
	        	animation: rotate 6s linear infinite;
	        	z-index: 10;
	   	 }
	   	 .wave:after {
	       		border-radius: 47%;
	        	background-color: rgba(255, 255, 255, .9);
	        	transform: translate(-50%, -70%) rotate(0);
	        	animation: rotate 10s linear -5s infinite;
	        	z-index: 20;
	    	}
		@keyframes rotate {
		    50% {
		        transform: translate(-50%, -73%) rotate(180deg);
		    } 100% {
		        transform: translate(-50%, -70%) rotate(360deg);
		    }
		}
	</style>
</head>
<body>
	<div class="container">
	    <div class="wave"></div>
	</div>
</body>
</html>

最终效果图：

与阳光握手言和

关注

7
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
纯css实现波浪动画，超级简单

前言：之前在博客上看到一位大神用css实现的水波动画，真是受益匪浅，原来本以为要会svg、canvas等技术，原来根本不需要，只需css简短的十几行代码就可以达到效果。关键是大神的这种思路，非常之得我们学习，不多说了，直接上代码。HTML部分： CSS部分：.wave { position: relative; width: 200px; height: 200px;
复制链接

扫一扫