css水波纹

最新推荐文章于 2024-07-14 13:35:37 发布

中小余

最新推荐文章于 2024-07-14 13:35:37 发布

阅读量104

点赞数

分类专栏：我是一只酸菜鱼

本文链接：https://blog.csdn.net/qq_18747089/article/details/118896495

版权

我是一只酸菜鱼专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css水波纹</title>
	</head>
	<style type="text/css">
		.pointing-arrow__rings {
			position: relative;
			width: 120px;
			height: 120px;
		}

		.pointing-arrow__pulse {
			position: absolute;
			width: 120px;
			height: 120px;
			border: 1px solid rgba(255, 255, 255, 0.3);
			border-radius: 50%;
			-webkit-transform: scale(0.1, 0.1);
			transform: scale(0.1, 0.1);
			opacity: 0;
			-webkit-animation: circle-blink 3000ms ease-out infinite;
			animation: circle-blink 3000ms ease-out infinite;
		}

		.pointing-arrow__pulse:nth-of-type(2) {
			-webkit-animation-delay: 600ms;
			animation-delay: 600ms;
		}

		.pointing-arrow__pulse:nth-of-type(3) {
			-webkit-animation-delay: 1200ms;
			animation-delay: 1200ms;
		}

 
		@-webkit-keyframes circle-blink {
			0% {
				-webkit-transform: scale(0.1, 0.1);
				transform: scale(0.1, 0.1);
				opacity: 0
			}

			50% {
				opacity: 1
			}

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

		@keyframes circle-blink {
			0% {
				-webkit-transform: scale(0.1, 0.1);
				transform: scale(0.1, 0.1);
				opacity: 0
			}

			50% {
				opacity: 1
			}

			100% {
				-webkit-transform: scale(1.2, 1.2);
				transform: scale(1.2, 1.2);
				opacity: 0
			}
		}
	</style>
	<body style="background: rgba(0,0,0,0.8);">

		<div class="pointing-arrow__rings">
			<div class="pointing-arrow__pulse"></div>
			<div class="pointing-arrow__pulse"></div>
			<div class="pointing-arrow__pulse"></div>
		</div>
	</body>
</html>

在这里插入图片描述

中小余

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css水波纹

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css水波纹</title> </head> <style type="text/css"> .pointing-arrow__rings { position: relative; width: 120px; height: 120px; } .p
复制链接

扫一扫