css文章左右滑动 |网页设计css字体设计

CSS代码：
.slider-container {
width: 100%;
overflow: hidden;
}
.slider {
display: flex;
width: 300%;
transition: transform 0.5s ease-in-out; 
}
.JavaScript代码：
var slider = document.querySelector('.slider');
var slideIndex = 0;
function slideNext() {
if (slideIndex0) {
slideIndex--;
slider.style.transform = 'translateX(-' + (slideIndex * 100)  + '%)';
}
}
注释：
首先，将.slider-container设置为100%宽度，并隐藏溢出的内容。
然后，为.slider设定三倍的宽度，以便通过translateX()移动内容。
因为使用了display:flex;，所以能够自适应手机端和电脑端的宽度。
在JavaScript中，定义了slideNext()和slidePrev()函数来移动.slider中的内容。
slideNext()函数检查是否到达最后一页，然后通过设置样式来实现移动效果。
slidePrev()函数检查是否到达第一页，然后通过设置样式来实现移动效果。

最后，将slideNext()和slidePrev()函数分别与左右箭头的click事件关联，即可实现左右滑动的效果。