写一个简单的 CSS 动画
warning:
这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。
以下是一个简单的 CSS 动画示例，它会使一个元素在页面上移动：
/* 首先定义一个关键帧动画 */
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
/* 接着应用动画到一个元素上 */
.box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
/* 使用动画名称和持续时间 */
animation: moveRight 2s infinite;
}
<!-- HTML 结构 -->
<div class="box"></div>这段代码定义了一个名为 moveRight 的关键帧动画，它将元素从原始位置向右移动 100px。然后，.box 类应用了这个动画，使得类 box 的所有元素都会无限循环地执行这个动画。
评论已关闭