css 是一种常用的网页设计语言，可以用来实现众多的网页效果。其中，滑动效果也是非常常见的一种。以下就介绍一些 css 实现滑动效果的方法。
一、使用 transform 属性
使用 transform 属性可以实现平移、旋转、缩放等效果。其中，在平移动画中，可以使用 translateX() 和 translateY() 来控制元素水平和垂直方向的移动。
示例代码如下：
<style>
.box {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform .5s ease;
}
.box:hover {
transform: translateX(100px);
}
</style>
<div class="box"></div>这段代码实现了当鼠标悬停在盒子上时，会以 0.5 秒的缓动效果从原位置向右移动 100px 的效果。其中，在 .box:hover 的伪类中，使用了 translateX() 来控制元素在 X 轴上的平移。
立即学习“前端免费学习笔记（深入）”；
二、使用 animation 属性
使用 animation 属性可以实现更加复杂的动画，在其中我们可以设定关键帧，控制元素的动画效果。
示例代码如下：
<style>
.box {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: slide 1s ease-in-out infinite alternate;
}
@keyframes slide {
from {
transform: translateX(0px);
}
to {
transform: translateX(100px);
}
}
</style>
<div class="box"></div>这段代码通过定义了一个叫做 slide 的动画来实现了盒子从左向右滑动的效果。其中，使用了 animation 属性对动画进行了配置，设置了缓动效果、无限播放和来回渐变。而通过 @keyframes 关键字定义的 slide 动画中，我们通过 from 和 to 来控制了元素的初始状态和最终状态，从而实现了滑动效果。
总结
通过 CSS 中提供的 transform 属性和 animation 属性，我们可以很方便地实现元素的滑动效果。在实际开发中，可以根据具体的需求进行选择，达到最佳的效果和用户体验。
