css3动画x轴移动 |css3 导航动画效果

// HTML代码
<div class="box">这是一个盒子</div>
// CSS3代码
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative; 
animation: move 2s infinite ease-in-out;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}

在HTML中，大家首先需要创建一个盒子，然后在CSS3中设置该盒子的宽度、高度和背景颜色。为了让盒子进行移动，大家还需要将它的position属性设置为relative。

接下来，大家使用@keyframes规则来定义该动画：在0%和100%的位置，盒子会停留在左边和右边的位置，而在50%的位置，盒子会移动到页面的中间位置。最后，大家将上述动画绑定到盒子的animation属性上，从而使其能够实现动态效果。

总之，使用CSS3动画x轴移动，可以让大家的网页具有更加生动和动态的特效，提升网页的用户体验度。