效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点扩散渐变动画</title>
<style type="text/css">
*,
::after,
::before {
box-sizing: border-box;
}
.fath{
width: 100px;
height: 100px;
margin: 100px auto;
position: relative;
}
.flashIcon {
position: absolute;
top: 50%;
left: 10px;
z-index: 2;
height: 10px;
width: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-color: #c80000;
margin-top: -5px;
}
.flashIcon:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #c80000;
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -5px;
animation-name: blink-a;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.flashIcon:after {
content: "";
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #c80000;
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -5px;
animation-name: blink-b;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes blink-a {
0% {
transform: scale(1, 1);
}
100% {
transform: scale(3, 3);
opacity: 0;
}
}
@keyframes blink-b {
0% {
transform: scale(1, 1);
}
100% {
transform: scale(3, 3);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="fath">
<span class="flashIcon"></span>
</div>
</body>
</html>
转载：
原文链接：https://blog.csdn.net/qq_35393869/article/details/118930765?spm=1001.2014.3001.5502