网站首页编程语言正文

CSS3动画：wifi 焦点扩散渐变

作者：草巾冒小子更新时间： 2022-06-06 编程语言

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>

以上就是关于“ animate动画：wifi 焦点扩散渐变（动画）”的全部内容。

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

上一篇：web前端实现水平垂直居中、position、relativ
下一篇：PowerShell yarn : 无法加载文件 C:\Us

网站首页 编程语言 正文

CSS3动画：wifi 焦点扩散渐变

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

效果图 · 演示：

Demo 代码如下：

相关推荐

网站首页编程语言正文

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