CSS3 光弧扩散效果
CSS3 光弧扩散效果属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了光弧扩散的效果，下面就详细介绍一下它的实现过程。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
margin: 100px;
}
li {
float: left;
width: 50px;
height: 50px;
margin-right: 100px;
}
.box span {
width: 100px;
height: 100px;
margin: 12px;
display: block;
border-radius: 50%;
background: linear-gradient(red, blue);
transition: 1s all ease;
}
a:before {
border: 12px solid #A8E957;
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 62px;
opacity: 0;
}
li:hover span {
transform: rotateZ(360deg);
}
li:hover a:before {
animation: warn 1s ease;
}
@keyframes warn {
0% {
transform: scale(1);
opacity: 0.8;
}
20% {
transform: scale(1);
opacity: 0.6;
}
40% {
transform: scale(1.2);
opacity: 0.4;
}
60% {
transform: scale(1.4);
opacity: 0.2;
}
80% {
transform: scale(1.6);
opacity: 0.1;
}
100% {
transform: scale(1.8);
opacity: 0.0;
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><span></span></a></li>
<li><a href="#"><span></span></a></li>
</ul>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
* {
margin: 0;
padding: 0;
list-style: none;
}
进行简单的初始化操作，比较粗暴；在网络上有很多比较好的初始化代码。
.box {
margin: 100px;
}
设置box元素的外边距。
li {
float: left;
width: 50px;
height: 50px;
margin-right: 100px;
}
设置li元素的一些相关样式属性。
.box span {
width: 100px;
height: 100px;
margin: 12px;
display: block;
border-radius: 50%;
background: linear-gradient(red, blue);
transition: 1s all ease;
}
设置span元素的宽度和高度都为100px；内联元素是不能够设置尺寸，所以后面使用了display: block将其转换为块级元素；内联块级元素也是可以设置尺寸的；同时为其应用了线性渐变，这就是我们看到的红色和蓝色的过度效果。transition: 1s all ease的应用可以使其任何动画属性发生变化都会产生动画效果。
a:before {
border: 12px solid #A8E957;
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 62px;
opacity: 0;
}
添加一个伪元素，设置它的边框为12px。
设置它为定位的目的是为了让其变成块级元素，伪元素必须设置为内联块级或者块级，否则无法为其设置其尺寸。
border-radius值为62，这恰好宽度一半+边框尺寸值，实现了内外都是圆弧的效果，具体可以参阅相关阅读。
li:hover span {
transform: rotateZ(360deg);
}
鼠标悬浮li元素，让span元素旋转起来。
li:hover a:before {
animation: warn 1s ease;
}
鼠标悬浮li元素，伪元素会产生动画效果。
后面的动画效果也就不多介绍，就是透明度等属性的动画设置。
二.相关阅读:
（1）.线性渐变参阅CSS3 linear-gradient一章节。
（2）.transition参阅CSS3 transition一章节。
（3）.border-radius参阅CSS3 border-radius一章节。
（4）.opacity参阅CSS opacity属性一章节。
（5）.@keyframes参阅CSS3 @keyframes一章节。
CSS3 光弧扩散效果，这样的场景在实际项目中还是用的比较多的，关于CSS3 光弧扩散效果就介绍到这了。