HTML CSS3动画

在HTML和CSS3中创建一个简单的动画，你可以使用@keyframes规则来定义动画，然后将其应用到一个元素上。以下是一个示例：

HTML:




<div class="animated-box"></div>

CSS:




.animated-box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: moveBox 2s infinite alternate;
}
 
@keyframes moveBox {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: 200px; /* 修改为你希望动画停止的位置 */
    top: 200px; /* 修改为你希望动画停止的位置 */
  }
}

在这个例子中，.animated-box元素将沿着页面向右下角移动，动画将无限次数地执行，并且每次动画结束时它会反向播放。你可以通过调整@keyframes中的百分比来控制动画的开始和结束状态。

评论已关闭

推荐阅读