热搜：编程 Python Microsoft 编程语言 C++

CSS如何实现水波纹的效果

发布时间：2022-12-31 13:28:34 来源：网络

.

不要沮丧，不必惊慌，做努力爬的蜗牛或坚持飞的笨鸟，我们试着长大，一路跌跌撞撞，然后遍体鳞伤。坚持着，总有一天，你会站在最亮的地方，活成自己曾经渴望的模样。

在逛一个技术博客的时候，发现了一个利用css动画实现水波纹效果的示例，虽然效果不咋得，但在一些特定的场景下还是可以用一用的，记录下来以后备用哦。

CSS实现水波纹效果的方法

示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>水波纹效果</title>
	<style>		
		@-webkit-keyframes wateranimate {
			0% {
				-webkit-transform: scale(0);
				opacity: 0.5;
			}
			100% {
				-webkit-transform: scale(2);
				opacity: 0;
			}
		}
		@keyframes wateranimate {
			0% {
				-webkit-transform: scale(0);
				transform: scale(0);
				opacity: 0.5;
			}
			100% {
				-webkit-transform: scale(2);
				transform: scale(2);
				opacity: 0;
			}
		}			
		.container {
			position: relative;
			width: 300px;
			height: 300px;
			margin: 50px auto 10px auto;
			background-color: #fbfbfb;
		}			
		.water1 {
			-webkit-animation: wateranimate 12s 9s ease-out infinite;
			animation: wateranimate 12s 9s ease-out infinite;
		}			
		.water2 {
			-webkit-animation: wateranimate 12s 6s ease-out infinite;
			animation: wateranimate 12s 6s ease-out infinite;
		}			
		.water3 {
			-webkit-animation: wateranimate 12s 3s ease-out infinite;
			animation: wateranimate 12s 3s ease-out infinite;
		}			
		.water4 {
			-webkit-animation: wateranimate 12s 0s ease-out infinite;
			animation: wateranimate 12s 0s ease-out infinite;
		}			
		.water1, .water2, .water3, .water4 {
			padding: 20%;
			position: absolute;
			left: 30%;
			top: 30%;
			border: 1px solid pink;
			box-shadow: 0 0 120px 30px rgba(235, 31, 137, 1) inset;
			border-radius: 100%;
			z-index: 1;
			opacity: 0;
		}
		.mochu{
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="water1"></div>
		<div class="water2"></div>
		<div class="water3"></div>
		<div class="water4"></div>
	</div>
	<div class="mochu"></div>
</body>
</html>

运行结果：

CSS实现水波纹的效果