效果预览
https://codepen.io/strugglingBoy/pen/rqejqR
代码下载
https://github.com/enstrongbill/daily-frontend-exercise/tree/master/021-abstract-eyes
代码解读
1.html代码
定义一个.eye的容器,里面包含9个.cirque(圆环)
<div class="eye">
<span class="cirque"></span>
<span class="cirque"></span>
<span class="cirque"></span>
<span class="cirque"></span>
<span class="cirque"></span>
<span class="cirque"></span>
<span class="cirque"></span>
<span class="cirque"></span>
<span class="cirque"></span>
</div>
2.css代码
因为我们眼睛有两个,水平并不居中,垂直居中
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: space-around;
background: linear-gradient(floralwhite, wheat);
}
眼睛容器内部居中
.eye {
display: flex;
align-items: center;
justify-content: center;
}
动态的实现每个圆环
.cirque {
position: absolute;
border-radius: 50%;
border: .5em solid;
width: calc(2.125em * var(--index));
height: calc(2.125em * var(--index));
}
圆环动画的实现
@keyframes spinX {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(-180deg);
}
然后给圆环加上动画(最主要的是animation-delay这个延迟属性)
.cirque{
animation: spinX 3s linear infinite;
animation-delay: calc(var(--index) * 0.075s);
}
最后就完成了