本文介绍了基本动画HTML和CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我只是个初学者，我只是想弄明白动画和它们是如何工作的。
我的计划是将球在一条线上无限地移动多少度(比方说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>这篇关于基本动画HTML和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！