所以我只是一个初学者，我只是想弄清楚动画及其工作原理。
我的计划是在一条直线上以无限度数（比方说 90 度）无限地移动球。以下是我想知道的几个问题：
- 有没有更好的方法来使用具有共同规则和略有不同规则（具有不同旋转）的类？
- 如何让球在具有不同旋转的新线上移动？
.line,
.line-deg90 {
background-color: hsl(0, 0%, 0%);
height: 3px;
width: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: 0 0 0 -200px;
transform-origin: 50%;
}
.line-deg90 {
transform: rotate(90deg);
}
.ball {
background-color: hsl(0, 0%, 0%);
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
top: -15px;
left: 0;
animation: move 2s infinite alternate ease-in-out;
}
@keyframes move {
0% {
left: 0px;
top: -15px;
}
100% {
left: 370px;
top: -15px;
}
<div class="line">
<div class="ball"></div>
<div class="line-deg90"></div>
这是一个使用 CSS 变量来生成通用代码的想法。只需调整角度和偏移即可控制运动
.ball {
--angle: 0deg;
--offset: 150px;
background-color: hsl(0, 0%, 0%);
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
inset: 0;
margin: auto;
animation: move 2s infinite alternate ease-in-out;
}
@keyframes move {
0% {
transform: rotate(var(--angle)) translate(var(--offset))
}
100% {
transform: rotate(var(--angle)) translate(calc(-1*var(--offset)))
}
}
html {
min-height:100%;
background:
linear-gradient(red 0 0) center/100% 2px,
linear-gradient(red 0 0) center/2px 100%;
background-repeat:no-repeat;
}
<div class="ball"></div>
<div class="ball" style="--angle:90deg;--offset:100px"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
