css - 没有伪元素的 div 动画
问题描述
我正在尝试使用单个 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;
}
}
我知道它没有完全相同的效果,但对我来说已经足够了。希望它可以帮助某人。
推荐阅读
- angular - 多个路由器插座,命名路由器插座不起作用
- c++ - 如果参数被传递两次,会发生什么情况?一次按值,一次按引用?会修改还是不修改?
- r - 数据表:根据第一行和最后一行共享列值的间隔进行分组
- python - 使用 django 在 sqlite 中存储和检索整数列表
- android - 如何修复Android中的UnityPlayerActivity从其他模块请求权限?
- prolog - 一个易于实现的 prolog 图形界面
- r - 如何将函数参数传递给 R 模型对象
- excel - 打印宏疑难解答
- angular - 无法在 Angular 7 项目中加载 Bootstrap 4.2.1 样式
- c# - 给游戏对象速度/速度并转换向量点