纯CSS3波纹动态效果

最新推荐文章于 2024-05-15 10:25:21 发布

各自安好、

最新推荐文章于 2024-05-15 10:25:21 发布

阅读量577

点赞数 1

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_41465646/article/details/107615112

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.circleBox {
				width: 200px;
				height: 500px;
				margin: auto;
			}

			.circle1,
			.circle2,
			.circle3,
			.circle4,
			.circle5 {
				width: 200px;
				height: 200px;
				border-radius: 50%;
				position: absolute;
				top: 20%;
			}

			.circle5 {
				background-color: rgba(41, 187, 255, 0.3);
			}

			.circle5>img {
				width: 25%;
				height: 25%;
				margin: 35% auto 0;
				vertical-align: initial;
				position: relative;
				left: 37%;
			}

			.circle1 {
				animation: myfirst 4s linear 0s infinite;
				background-color: rgba(41, 187, 255, 0.3);
				-moz-animation: myfirst 4s linear 0s infinite;
				/* Firefox */
				-webkit-animation: myfirst 4s linear 0s infinite;
				/* Safari 和 Chrome */
				-o-animation: myfirst 4s linear 0s infinite;
				/* Opera */
			}

			.circle2 {
				animation: myfirst 4s linear 1s infinite;
				background-color: rgba(41, 187, 255, 0.3);
				-moz-animation: myfirst 4s linear 1s infinite;
				/* Firefox */
				-webkit-animation: myfirst 4s linear 1s infinite;
				/* Safari 和 Chrome */
				-o-animation: myfirst 4s linear 1s infinite;
				/* Opera */
			}

			.circle3 {
				animation: myfirst 4s linear 2s infinite;
				background-color: rgba(41, 187, 255, 0.3);
				-moz-animation: myfirst 4s linear 2s infinite;
				/* Firefox */
				-webkit-animation: myfirst 4s linear 2s infinite;
				/* Safari 和 Chrome */
				-o-animation: myfirst 4s linear 2s infinite;
				/* Opera */
			}

			.circle4 {
				animation: myfirst 4s linear 3s infinite;
				background-color: rgba(41, 187, 255, 0.3);
				-moz-animation: myfirst 4s linear 3s infinite;
				/* Firefox */
				-webkit-animation: myfirst 4s linear 3s infinite;
				/* Safari 和 Chrome */
				-o-animation: myfirst 4s linear 3s infinite;
				/* Opera */
			}

			@keyframes myfirst {
				0% {
					-webkit-transform: scale(1);
					transform: scale(1);
					opacity: 1;
				}

				10% {
					-webkit-transform: scale(1.15);
					transform: scale(1.15);
					opacity: 0.9;
				}

				20% {
					-webkit-transform: scale(1.3);
					transform: scale(1.3);
					opacity: 0.8;
				}

				30% {
					-webkit-transform: scale(1.45);
					transform: scale(1.45);
					opacity: 0.7;
				}

				40% {
					-webkit-transform: scale(1.6);
					transform: scale(1.6);
					opacity: 0.6;
				}

				50% {
					-webkit-transform: scale(1.75);
					transform: scale(1.75);
					opacity: 0.5;
				}

				60% {
					-webkit-transform: scale(1.9);
					transform: scale(1.9);
					opacity: 0.4;
				}

				70% {
					-webkit-transform: scale(2.05);
					transform: scale(2.05);
					opacity: 0.3;
				}

				80% {
					-webkit-transform: scale(2.2);
					transform: scale(2.2);
					opacity: 0.2;
				}

				90% {
					-webkit-transform: scale(2.35);
					transform: scale(2.35);
					opacity: 0.1;
				}

				100% {
					-webkit-transform: scale(2.5);
					transform: scale(2.5);
					opacity: 0;
				}

			}
		</style>
	</head>
	<body>

		<div class="circleBox">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
			<div class="circle5"></div>
		</div>

	</body>
</html>