基本动画HTML和CSS [英] Basic Animation HTML and CSS

问题描述

所以我只是个初学者，我只是想弄明白动画和它们是如何工作的。

我的计划是将球在一条线上无限地移动多少度(比方说90度)。以下是我想知道的几个问题：

1. 有没有更好的方法来使用规则相同且略有不同(具有不同轮换)的类？
2. 如何才能使球在不同旋转的新线上移动？

.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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！