我正在尝试使用单个html元素创建自定义加载微调器,
<div class="loader"></div>
它应该看起来像3条缩放,我正在向元素添加动画以及前后伪元素。我的问题在于,当我将动画添加到实际div时,动画也会传递给伪元素,并且缩放是它们的两倍。
.loader {
width: 10px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
background-color: tomato;
animation: grow 1s ease-in-out 0.33s infinite;
&::after,
&::before {
content: "";
width: inherit;
height: inherit;
background-color: inherit;
position: inherit;
}
&::before {
top: 0px;
left: -15px;
animation: grow 1s ease-in-out infinite;
}
&::after {
top: 0px;
left: 15px;
animation: grow 1s ease-in-out 0.66s infinite;
}
}
@keyframes grow {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
有没有办法阻止动画继承到伪元素?
所以最后我发现缩放动画是向下继承的错误。我尝试在没有缩放功能的情况下重写动画,并提出了类似结果的东西。
@keyframes grow {
0%,
100% {
height: 3em;
width: 0.75em;
box-shadow: 0 0;
}
50% {
height: 4em;
width: 0.8em;
box-shadow: 0 -1em;
}
}
我知道它没有完全相同的效果,但它对我来说已经足够了。希望它可以帮助某人。