HTML5:七天学会基础动画网页10
在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创建简单的动画效果。
评论已关闭