html5做动画

HTML5动画是一种在网页上创建动态效果的技术，它可以让网页更加生动有趣，在HTML5中，有多种方法可以实现动画效果，包括CSS3动画、JavaScript动画等，本文将详细介绍如何使用HTML5编写动画。

1、CSS3动画

CSS3动画是一种基于CSS的动画技术，它可以让元素在一段时间内实现平滑的过渡效果，CSS3动画主要包括关键帧动画和过渡动画两种类型。

1、1 关键帧动画

关键帧动画是通过定义元素的起始状态和结束状态，让浏览器自动计算中间状态的过程，在CSS3中，可以使用@keyframes规则来定义关键帧动画。

以下是一个简单的关键帧动画示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义一个名为myAnimation的关键帧动画 */
@keyframes myAnimation {
  0% {background-color: red; left: 0px; top: 0px;}
  25% {background-color: yellow; left: 200px; top: 0px;}
  50% {background-color: blue; left: 200px; top: 200px;}
  75% {background-color: green; left: 0px; top: 200px;}
  100% {background-color: red; left: 0px; top: 0px;}
}
/* 将myAnimation应用到一个div元素上 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
}
</style>
</head>
<body>
<h1>我的HTML5动画</h1>
<p>点击下面的按钮开始动画：</p>
<button onclick="startAnimation()">开始动画</button>
<div id="animateDiv"></div>
<script>
function startAnimation() {
  var div = document.getElementById("animateDiv");
  /* 设置div的背景颜色为myAnimation的第一个关键帧 */
  div.style.animationName = "myAnimation";
  /* 设置div的背景颜色为myAnimation的最后一个关键帧 */
  div.style.animationIterationCount = "infinite";
}
</script>
</body>
</html>

在这个示例中，我们定义了一个名为myAnimation的关键帧动画，然后将其应用到一个div元素上，当用户点击“开始动画”按钮时，div元素会开始播放这个动画，由于我们将animationIterationCount设置为"infinite"，所以这个动画会无限循环播放。

1、2 过渡动画

过渡动画是CSS3中的一种简单动画类型，它可以让元素在不同状态下实现平滑的过渡效果，在CSS3中，可以使用transition属性来定义过渡动画。

以下是一个简单的过渡动画示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义一个名为myTransition的过渡动画 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  transition: background-color 2s, left 2s, top 2s; /* 设置背景颜色、left和top属性的过渡时间为2秒 */
}
</style>
</head>
<body>
<h1>我的HTML5动画</h1>
<p>点击下面的按钮改变div的背景颜色和位置：</p>
<button onclick="changeProperties()">改变属性</button>
<button onclick="resetProperties()">重置属性</button>
<br><br>
<div id="animateDiv"></div>
<script>
var isChanged = false; // 用于判断div的属性是否已经被改变过
function changeProperties() {
  if (!isChanged) { // 如果div的属性还没有被改变过，则改变其属性并标记已改变过的状态
    var div = document.getElementById("animateDiv");
    div.style.backgroundColor = "blue"; // 改变背景颜色为蓝色
    div.style.left = "100px"; // 改变left属性为100px（向右移动）
    div.style.top = "100px"; // 改变top属性为100px（向下移动）
    isChanged = true; // 标记已改变过的状态（防止重复改变）
    setTimeout(resetProperties, 2000); // 2秒后调用resetProperties函数重置div的属性（防止无限循环改变）
  } else { // 如果div的属性已经被改变过，则直接重置其属性并标记未改变过的状态（允许再次改变）
    resetProperties(); // 调用resetProperties函数重置div的属性（允许再次改变）
    isChanged = false; // 标记未改变过的状态（允许再次改变）
    setTimeout(resetProperties, 2000); // 2秒后调用resetProperties函数重置div的属性（防止无限循环改变）
  }
}
function resetProperties() { // 重置div的属性并标记未改变过的状态（允许再次改变）
  var div = document.getElementById("animateDiv");
  isChanged = false; // 标记未改变过的状态（允许再次改变）
}
</script>
</body>
</html>

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/346320.html

html5做动画

相关推荐

发表回复