javascript - 当父元素有动画时,如何将子元素设置为无动画?
问题描述
这是我的代码。我试图让子 h3 元素没有动画,同时父 .loader 元素应该包含动画。我尝试了很多方法来停止为子 h3 元素设置动画。但是每当我尝试时,子元素都会从父元素继承旋转动画并随之旋转。
我希望子元素没有任何动画,而父.loader
元素仍应包含加载动画。
#loader-wrap {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #050505;
z-index: 800;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.loader {
position: relative;
margin: -30px 0 0 -30px;
color: rgba(255, 255, 255, 0.6);
border-top: 6px solid rgba(255, 255, 255, 0.1);
border-right: 6px solid rgba(255, 255, 255, 0.1);
border-bottom: 6px solid rgba(255, 255, 255, 0.1);
border-left: 6px solid rgba(255, 255, 255, 0.24);
animation: rotating 1s linear infinite;
-webkit-animation: rotating 1s linear infinite;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
<html>
<head><title>Loading Animation</title>
<body>
<div id="loader-wrap">
<div class="loader">
<h3 class="logo-left">TE</h3>
<h3 class="logo-right">FI</h3>
</div>
</div>
</body>
</html>
解决方案
您可以添加动画.loader:before
#loader-wrap {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #050505;
z-index: 800;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.loader {
position: relative;
margin: -30px 0 0 -30px;
color: rgba(255, 255, 255, 0.6);
width: 100px;
height: 100px;
text-align: center;
}
.loader:before {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border-top: 6px solid rgba(255, 255, 255, 0.1);
border-right: 6px solid rgba(255, 255, 255, 0.1);
border-bottom: 6px solid rgba(255, 255, 255, 0.1);
border-left: 6px solid rgba(255, 255, 255, 0.24);
animation: rotating 1s linear infinite;
-webkit-animation: rotating 1s linear infinite;
display: block;
position: absolute;
left: 0;
top: 0;
}
@keyframes rotating {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<head><title>Loading Animation</title>
<body>
<div id="loader-wrap">
<div class="loader">
<h3 class="logo-left">TE</h3>
<h3 class="logo-right">FI</h3>
</div>
</div>
</body>
推荐阅读
- spring-boot - netflix feign 查询参数问题
- javascript - 通过单击获取具有相同标签的帖子
- ruby-on-rails - cypress 的严格模式下不允许使用旧式八进制文字
- python - 如何组织一个python类,使所有成员变量都靠近顶部?
- hadoop - 创建 Sqoop Hive 导入作业
- postgresql - SELECT 查询的 PostgreSQL 自动提交效率
- elasticsearch - LogDNA 只存储最后一个月的日志
- react-native - React Native 样式表中的循环样式
- c# - 从实例化按钮识别按钮点击 - 在数组中隐藏游戏对象
- android - lastBaselineToBottomHeight 和 paddingBottom 的区别