你知道我怎样才能避免子 div 不与父 div 一起动画吗?
@keyframes rotate
{
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
.gradient {
width: 200px;
height: 200px;
position: relative;
top: 100px;
margin: 0 auto;
border: 20px solid rgba(0, 0, 0, 0);
border-radius: 50%;
-webkit-border-radius: 50%;
background-image: linear-gradient(white, white), linear-gradient(#ff0000, #0000ff);
background-origin: border-box;
background-clip: content-box, border-box;
animation: rotate 5s infinite linear;
}
.gradientitem {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
margin: -15px;
background-color: #999999;
}
<div class="gradient">
<div class="gradientitem" style="transform: rotate(180deg) translate(100px) rotate(180deg);"></div>
<div class="gradientitem" style="transform: rotate(0deg) translate(100px) rotate(-0deg);"></div>
</div>
所以在这里你可以看到我的问题的一个例子,即两个小圆圈随着大圆圈旋转。我尝试了不同的方法,比如为 children 改变位置或“动画:无”......
最佳答案
在渐变div中为动画创建一个新元素
<div class="gradient_animation"></div>
为这个类添加动画CSS。它有效。!
@keyframes rotate
{
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
.gradient {
width: 200px;
height: 200px;
position: relative;
margin: 100px;
}
.gradient_animation{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border: 20px solid rgba(0, 0, 0, 0);
border-radius: 50%;
-webkit-border-radius: 50%;
background-image: linear-gradient(white, white), linear-gradient(#ff0000, #0000ff);
background-origin: border-box;
background-clip: content-box, border-box;
animation: rotate 5s infinite linear;
}
.gradientitem {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
-webkit-border-radius: 50%;
margin: -15px;
background-color: #999999;
}
<div class="gradient">
<div class="gradient_animation"></div>
<div class="gradientitem" style="transform: rotate(180deg) translate(100px) rotate(180deg);"></div>
<div class="gradientitem" style="transform: rotate(0deg) translate(100px) rotate(-0deg);"></div>
</div>
关于html - 如何避免在 css 中的子级上出现级联动画(@keyframe)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42534865/