分享一段代码实例,它实现了光弧扩散的效果,下面就详细介绍一下它的实现过程。
代码实例如下:[HTML] 纯文本查看 复制代码运行代码
蚂蚁部落* {
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:b