HTML CSS3动画

作者：System 时间：2024年08月15日分类：所有,html 字数：551

这篇文章距离上次修改已过445天，其中的内容可能已经有所变动。

在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中的百分比来控制动画的开始和结束状态。

HTML CSS3动画

评论已关闭

推荐阅读