css3 实现左右滑动

CSS3是最新版本的CSS（层叠样式表），它能够让我们通过一些简单的代码实现很多复杂的效果。其中之一就是左右滑动。

我们可以使用CSS3的transform属性来实现元素的平移，结合一些动画属性，就能够让元素左右滑动。

/* 容器样式 */
.container{
  overflow: hidden;
  position: relative;
}

/* 子元素样式 */
.slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  transition: transform .3s ease-in-out; /* 过渡效果 */
}

/* 右滑动效果 */
.slide.right-active{
  transform: translateX(0);
}

/* 左滑动效果 */
.slide.left-active{
  transform: translateX(-200%);
}
@H_404_10@

上面的代码中，我们给容器添加了overflow: hidden;和position: relative;，并给子元素添加了position: absolute;、width: 100%和height: 100%。然后通过transform属性来实现元素的平移，并在右滑和左滑的时候切换相应的类名，来改变元素的位置。

最后，我们给子元素添加transition属性，让元素的平移带有过渡效果。

通过上述代码，我们就能够轻松实现一个左右滑动的效果了。
							
                
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。