CSS3动画：wifi 焦点扩散渐变（动画）

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

草巾冒小子

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

阅读量766

点赞数

分类专栏： CSS 3 文章标签：动画 css3

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/118930765

版权

CSS 3 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

CSS3动画：wifi 焦点扩散渐变（动画）

效果图 · 演示：

在这里插入图片描述

Demo 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点扩散渐变动画</title>
<style type="text/css">
*, ::after, ::before {
    box-sizing: border-box;
}
.flash-icon {
    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;
}
.flash-icon: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;
}
.flash-icon: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" style="width: 100px;height: 100px;margin: 100px auto;position: relative;">
		<span class="flash-icon"></span>
	</div>
</body>
</html>