HTML5:七天学会基础动画网页12
warning:
这篇文章距离上次修改已过192天，其中的内容可能已经有所变动。
在HTML5中，要实现一个基础的动画效果，可以使用CSS3的@keyframes规则来创建动画，并使用animation属性应用到元素上。以下是一个简单的示例，演示了如何创建一个旋转动画：
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义一个名为rotate的动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 应用动画到.box元素 */
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px;
animation: rotate 2s linear infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个例子中，.box类定义了一个元素的基本样式，并通过animation属性应用了名为rotate的动画。@keyframes rotate规则定义了从0度旋转到360度的动画过程，持续时间为2秒，并且是无限循环的。
评论已关闭