css雷达动效

yangzheui

已于 2024-09-24 11:21:29 修改

阅读量172

点赞数 1

文章标签： css 前端

于 2024-04-23 21:48:56 首次发布

本文链接：https://blog.csdn.net/yangzheui/article/details/138139610

版权

html部分

<div class="blob"></div>

css部分

.blob {
	background: #1a67d4;
	box-shadow: 0 0 0 0 rgba(0, 63, 154, 1);
	height: 6px;
	width: 6px;
	border-radius: 50%;
	transform: scale(1);
	animation: 2s infinite pulse-black;
}

@keyframes pulse-black {
	0% {
		transform: scale(.95);
		box-shadow: 0 0 0 0 rgba(0, 63, 154, .7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 8px rgba(0, 63, 154, 0);
	}

	100% {
		transform: scale(.95);
		box-shadow: 0 0 0 0 rgba(0, 63, 154, 0);
	}
}