css左右移动的代码

css左右移动的代码
CSS可以实现元素的左右移动效果，让页面更加生动有趣。

下面是实现CSS左右移动的代码：
1. 使用CSS3的@keyframes动画
@keyframes moveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100px);
}
}
@keyframes moveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
在上面的代码中，我们定义了两个@keyframes动画，分别是moveLeft和moveRight。

这里我们使用了CSS3的transform属性来
实现元素的移动效果，translateX(x)表示元素在水平方向上移动x 个像素。

2. 使用CSS3的transition过渡效果
.left {
transition: transform .5s ease-in-out;
}
.right {
transition: transform .5s ease-in-out;
}
在上面的代码中，我们使用了CSS3的transition属性来实现元素的平滑过渡效果。

通过设置transition属性的值，我们可以指定元素在某个属性发生变化时的过渡效果，这里我们设置了transform属性发生变化时的过渡效果，时间为0.5秒，缓动函数为ease-in-out，表示先慢后快再慢。

3. 使用JavaScript的setInterval函数
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var leftPos = 0;
var rightPos = 0;
var leftInterval = setInterval(function() {
left.style.transform = 'translateX(' + (leftPos - 100) + 'px)';
leftPos -= 100;
}, 1000);
var rightInterval = setInterval(function() {
right.style.transform = 'translateX(' + (rightPos + 100) + 'px)';
rightPos += 100;
}, 1000);
在上面的代码中，我们使用了JavaScript的setInterval函数来实现元素的左右移动效果。

通过设置定时器，我们可以定时执行某个操作，这里我们设置了每隔1秒执行一次左移和右移操作。

在定时器的回调函数中，我们通过修改元素的transform属性来实现元素的左右移动效果。