在CSS3中，可以使用transform属性跟transition属性制作左右滑动的效果。
首先，定义两个div，一个作为container，一个作为需要滑动的元素
<div class="container">
<div class="slide-element">Slide Me</div>
</div>然后，我们在CSS中定义样式:
.container{
overflow: hidden; //隐藏超出容器范围的部分
width: 200px;
height: 200px;
}
.slide-element{
width: 200px;
height: 200px;
transition: transform 0.3s ease; //过渡属性
transform: translateX(0); //初始位置
}接着，我们可以使用Javascript来改变transform属性，让元素左右滑动:
var element = document.querySelector('.slide-element');
element.style.transform = "translateX(200px)"; //向右滑动如果要元素向左滑动，可以将translateX的值设为负值:
element.style.transform = "translateX(-200px)"; //向左滑动以上就是一个简单的左右滑动的例子，你可以根据你的需求来调整滑动的距离和时间。如果要制作更复杂的滑动效果，可以使用CSS3的animation属性配合@keyframes规则。 如果是华为云的代理商，可以将这种滑动效果应用在产品展示，新闻轮播等场景中。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/173069.html
