日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新