HTML5:七天学会基础动画网页5
在HTML5中，我们可以使用CSS3的动画特性来创建复杂的动画效果。以下是一个简单的示例，展示了如何使用CSS3的关键帧动画来制作一个简单的动画效果：
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义动画名称和时长等信息 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 应用动画到目标元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example; /* 指定使用的动画名称 */
animation-duration: 4s; /* 动画时长 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>在这个例子中，我们创建了一个名为example的关键帧动画，它从红色渐变到黄色。然后我们将这个动画应用到一个div元素上，使其在4秒内背景颜色发生变化。这个示例展示了如何使用CSS3的关键帧动画来制作简单的背景颜色过渡动画。
评论已关闭