用css写一个横向水平滑动

可以使用CSS的overflow-x属性和white-space属性来实现横向水平滑动。具体实现方法可以参考以下代码：

<style>
.scroll {
white-space: nowrap;
overflow-x: auto;
}
.scroll-item {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 20px;
background-color: #ccc;
}
</style>

<div class="scroll">
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<div class="scroll-item"></div>
</div>

相关问题

怎么通过css写一个横向滚动通告栏

可以通过以下代码实现一个横向滚动通告栏：

HTML代码：

<div class="scrolling-wrapper">
  <div class="scrolling-item">通告栏内容1</div>
  <div class="scrolling-item">通告栏内容2</div>
  <div class="scrolling-item">通告栏内容3</div>
  <div class="scrolling-item">通告栏内容4</div>
  <div class="scrolling-item">通告栏内容5</div>
</div>

CSS代码：

.scrolling-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
}

.scrolling-item {
  flex-shrink: 0;
  width: 200px;
  height: 100px;
  margin-right: 10px;
  background-color: #ccc;
  border-radius: 5px;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}

其中，`.scrolling-wrapper`是一个具有`flex`布局和横向滚动功能的容器，`.scrolling-item`表示每一个横向滚动的通告内容。`-webkit-overflow-scrolling: touch;`用于在移动端设备上提高滚动性能。根据实际需要修改`.scrolling-item`的宽度、高度、背景色、字体大小等样式即可。

使用css制作水平横向无缝滚动的轮播图

HTML代码：

<div class="slider-container">
  <ul class="slider">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
    <li><img src="image5.jpg"></li>
  </ul>
</div>

CSS代码：

.slider-container {
  width: 100%;
  overflow: hidden;
}

.slider {
  white-space: nowrap;
  transition: transform 1s ease-in-out;
}

.slider li {
  display: inline-block;
  width: 100%;
}

.slider img {
  width: 100%;
}

.slider-animating {
  animation: slide 5s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

解释：

首先，我们创建一个包含轮播图的容器，并设置其为100%宽度且隐藏溢出内容。然后，在容器中创建一个`<ul>`元素来包含轮播项，并设置其`white-space`属性为`nowrap`，这样就可以使其横向排列。接着，我们将每个轮播项设置为`inline-block`元素，并设置其宽度为100%。最后，为了实现无缝滚动，我们使用CSS动画来使`<ul>`元素水平滚动。

注意，我们还为正在动画中的轮播项添加了一个`.slider-animating`类，这样就可以实现无限循环滚动。