css 圆点背面两层背景并能动

林间风雨

已于 2022-03-04 11:13:16 修改

阅读量226

点赞数

分类专栏： CSS 文章标签： javascript electron html

于 2022-03-04 11:03:25 首次发布

本文链接：https://blog.csdn.net/jack_rose_me/article/details/123272091

版权

CSS 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>

	/* 扩散动画 */
	@keyframes spread {
		0% {
			opacity  : .2;
			transform: translate(-50%, -50%) scale(1, 1);
		}
	
		50% {
			opacity  : .3;
			transform: translate(-50%, -50%) scale(1.12, 1.12);
		}
	
		100% {
			opacity  : .2;
			transform: translate(-50%, -50%) scale(1, 1);
		}
	}
    .normal_dot {
		position     : relative;
		width        : 6px;
		height       : 6px;
		border-radius: 50%;
		background   : #009916;
	}
	
 .normal_dot::before {
	content            : '';
	position           : absolute;
	top                : 50%;
	left               : 50%;
	transform: translate(-50%, -50%);
	width              : 13px;
	height             : 13px;
	border-radius      : 50%;
	opacity            : .1;
	background-color   : #00BF1C;
	animation          : spread 2.1s infinite ease-in-out;
	animation-fill-mode: both;
}

 .normal_dot::after {
	content            : '';
	position           : absolute;
	top                : 50%;
	left               : 50%;
	transform: translate(-50%, -50%);
	width              : 20px;
	height             : 20px;
	border-radius      : 50%;
	opacity            : .05;
	background-color   : #00BF1C;
	animation          : spread 2.1s infinite ease-in-out;
	animation-fill-mode: both;
}
</style>
<body>
	<div class="normal_dot"></div>
</body>
</html>

在这里插入图片描述

林间风雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 圆点背面两层背景并能动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .normal_dot { position : relative; width : 6px; height : 6px;
复制链接

扫一扫