我正在尝试使用HTML和CSS创建“眨眼”动画。
我想要的是,当眨眼时,眼球没有显示出来。
从代码中可以看到,眼睛由4个元素组成。
Div“眼睛”是眼睛所在的容器。
Div“ eye1”和“ eye2”。
Div“眼罩”,具有闪烁效果。
Div“眼球1”和“眼球2”。这些应仅显示在“眼罩”的顶部,而不应显示在“ eye1”和“ eye2”的顶部。
有人可以帮我实现这一目标吗?
body {
margin: 0px;
}
#container {
position: absolute;
z-index: 100;
width: 300px;
height: 300px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
#eyes {
position: absolute;
z-index: 12;
width: 120px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
#eye1,
#eye2 {
z-index: 12;
}
#eye1,
#eye2,
#eyemask {
position: absolute;
width: 50px;
height: 50px;
background: #eee;
display: flex;
justify-content: center;
align-items: center;
clip-path: circle(50% at 50% 50%);
}
#eye2 {
transform: translateX(60px);
}
#eyemask {
background: #fff;
animation-name: blink;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes blink {
0% {
transform: scaleY(1);
}
20% {
transform: scaleY(1);
}
30% {
transform: scaleY(0);
}
40% {
transform: scaleY(1);
}
100% {
transform: scaleY(1);
}
}
#eyeball1,
#eyeball2 {
position: absolute;
z-index: 11;
width: 10px;
height: 10px;
background: #000;
clip-path: circle(50% at 50% 50%);
}
有人可以帮我实现这一目标吗?