css3 盒子线性流动效果
warning:
这篇文章距离上次修改已过446天，其中的内容可能已经有所变动。
CSS3 提供了很多实现盒子线性流动效果的方法，其中一种是使用 animation 属性结合 @keyframes 规则来创建动画。以下是一个简单的例子，展示如何使用 CSS3 创建一个盒子沿一条直线流动的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
animation: move 2s infinite alternate linear;
}
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个例子中，.box 是要流动的盒子，它将沿着 X 轴从左侧移动到右侧的 200px 位置。animation 属性定义了动画的名称 move，持续时间 2s，使动画无限次数循环 infinite，并且指定动画的播放方式 alternate 使其在到达终点时反向播放，linear 保证动画速度是均匀的。
@keyframes move 规则定义了动画的关键帧，从左边的位置 left: 0; 移动到 left: 200px;。
评论已关闭