我正在尝试使用HTML和CSS创建“眨眼”动画。
我想要的是，当眨眼时，眼球没有显示。
您可以从代码中看到，眼睛由4个元素组成。
“眼睛”是眼睛所在的容器。
Div“ eye1”和“ eye2”。
具有“眨眼效果”的“眼罩”。>
将“ eyeball1”和“ eyeball2”分开。 这些应该只显示在“眼罩”的顶部，而不应该显示在“ 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%); }<head> <link rel="stylesheet" type="text/css" href="Eyes.css"> </head> <body> <div id="container"> <div id="eyes"> <div id="eye1"> <div id="eyemask"></div> <div id="eyeball1"></div> </div> <div id="eye2"> <div id="eyemask"></div> <div id="eyeball2"></div> </div> </div> </div> </body>
这里有人可以帮助我实现这一目标吗？
我正在尝试使用HTML和CSS创建“眨眼”动画。我想要的是，当眨眼时，眼球没有显示出来。从代码中可以看到，眼睛由4个组成。
将#eyeball放入#eyemask内部，应该这样做