|
凡哥教程第二十九讲作业： 参照最后的示例，做个一父三子的小东东，父元素为圆形空心用以模拟轨道、子元素球体实心用以模拟星球。 要求：三个小星球中，每一个星球有一半在轨道内、另一半再轨道外，它们彼此间间隔一定距离，最终效果是三个小星球沿着轨道你追我赶地进行有序运动。 【提示】小球错开运动可在 animation 属性中使用简写形式的属性值加入延时执行动画的时间属性，整体语句结构为 animation: 动画名称 运动周期时长 运动延时 linear infinite，后两个属性分别表示匀速运动、永不停歇。运动周期时长和运动延时均需要 s 或 ms 单位，延时支持负数值，负数值表示提前运行
<style>
.qsfg29{
margin: 230px 0 30px calc(50% - 151px);
width: 300px;
height: 300px;
border: 1px solid gray;
border-radius: 50%;
display: grid;
place-items: center;
position: relative;
}
.son1 {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(45deg, olive, red);
animation: go 6s linear infinite;
animation-delay: -2s;
}
.son2 {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(45deg, olive, green);
animation: go 6s linear infinite;
animation-delay: -4s;
}
.son3 {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(45deg, olive, yellow);
animation: go 6s linear infinite;
animation-delay: -6s;
}
@keyframes go {
from { transform: rotate(0) translateX(150px); }
to { transform: rotate(-360deg) translateX(150px); }
}
</style>
<div class="qsfg29">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
| 
发表于 2024-9-1 21:32
发表于 2024-9-1 21:38
