CSS实现闪烁的光圈

最新推荐文章于 2024-05-30 10:50:01 发布

乐夫天命兮

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量2.5k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/100558303

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
	0% {transform: scale(0);opacity: 0.0;}
	10% {transform: scale(0.2);opacity: 0.2;}
	20% {transform: scale(0.4);opacity: 0.4;}
	30% {transform: scale(0.6);opacity: 0.6;}
	40% {transform: scale(0.8);opacity: 0.8;}
	50% {transform: scale(1);opacity: 1;}
	60% {transform: scale(1);opacity: 0.8;}
	70% {transform: scale(1);opacity: 0.6;}
	80% {transform: scale(1);opacity: 0.4;}
	90% {transform: scale(1);opacity: 0.2;}
	100% {transform: scale(1);opacity: 0;}
}

 
 
.container {
	position: relative;
	width: 40px;
	height: 40px;
	/*border: 1px solid #000;*/
	animation: warn 0.3s ease-out;
	animation-iteration-count: infinite;
}
/* 保持大小不变的小圆圈  */
.dot {
	position: absolute;
    width: 10px;
    height: 10px;
    left: 14px;
    top: 14px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border: 1px solid #f40d0d;
    background: #f43d3db0;
    border-radius: 20px;
    z-index: 2;
    animation: warn 0.1s ease-out;
	animation-iteration-count: infinite;
}
/* 产生动画（向外扩散变大）的圆圈  */
.pulse {
	position: absolute;
    width: 24px;
    height: 24px;
    left: 7px;
    top: 7px;
    border: 1px solid #f4313169;
    background: #ed2b2b4a;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    z-index: 1;

}
</style>
</head>
<body>
	<div class="container">
		<div class="dot"></div>
		<div class="pulse"></div>
	</div>
</body>
</html>

乐夫天命兮

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS实现闪烁的光圈

效果如下：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>@keyframes warn { 0% ...
复制链接

扫一扫