HTML5:七天学会基础动画网页3
在HTML5中，要创建一个基础的动画网页，你可以使用CSS3的@keyframes规则来定义动画，并使用JavaScript来控制动画的播放。以下是一个简单的示例，演示如何使用HTML5和CSS3创建一个基础的动画效果：
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义关键帧动画 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 应用动画到元素 */
.animated-box {
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
animation-name: example; /* 使用动画名称 */
animation-duration: 4s; /* 动画时长 */
animation-iteration-count: infinite; /* 动画无限次数播放 */
}
</style>
</head>
<body>
<div class="animated-box"></div>
<script>
// JavaScript 控制动画的播放
var box = document.querySelector('.animated-box');
box.onclick = function() {
box.style.animationPlayState = "paused"; // 暂停动画
};
</script>
</body>
</html>这个示例中，.animated-box 类定义了一个动画，在4秒内背景颜色从红色渐变到黄色。通过JavaScript，我们可以通过点击这个盒子来暂停动画。这个示例展示了如何结合HTML5、CSS3和JavaScript来创建一个基本的动画效果。
评论已关闭