HTML5:七天学会基础动画网页10

作者：System 时间：2024年08月22日分类：所有,html5 字数：790

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

在HTML5中，要实现一个基础的动画效果，可以使用CSS3的@keyframes规则来创建动画，并使用animation属性应用到元素上。以下是一个简单的示例，演示了如何创建一个旋转动画：

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义一个名为rotate的动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 应用动画到class为animated-box的元素 */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px;
  /* 开始动画 */
  animation-name: rotate;
  /* 动画周期 */
  animation-duration: 2s;
  /* 动画无限次数循环 */
  animation-iteration-count: infinite;
  /* 动画不停止 */
  animation-timing-function: linear;
}
</style>
</head>
<body>

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

</body>
</html>

这段代码定义了一个名为rotate的动画，该动画会使得.animated-box类的元素从0度旋转到360度。动画会无限次数循环，每次持续2秒钟。这个示例展示了如何使用CSS3创建简单的动画效果。

HTML5:七天学会基础动画网页10

评论已关闭

推荐阅读