Fatal编程技术网
  • css/
  • Css 如何获得垂直滚动的图像横幅？

Css 如何获得垂直滚动的图像横幅？

css

Css 如何获得垂直滚动的图像横幅？,css,css-animations,banner,keyframe,Css,Css Animations,Banner,Keyframe,我试图用我在网上找到的代码制作一个运动图像横幅，但我的问题是我似乎无法让它垂直滚动。现在，只有第一张照片在移动，我不知道为什么。是指向原始代码的链接 这是我到目前为止所拥有的 CSS: 身体{ 背景：url（'images/dark_geometric.png'）； } #容器{ 宽度：800px； 高度：705px； 溢出：隐藏； } .photobanner{ 高度：233px； 宽度：3550px； 边缘底部：80px； } /*关键帧动画*/ .首先{ -webkit动画：banner

我试图用我在网上找到的代码制作一个运动图像横幅，但我的问题是我似乎无法让它垂直滚动。现在，只有第一张照片在移动，我不知道为什么。是指向原始代码的链接

这是我到目前为止所拥有的

CSS:


身体{
背景：url（'images/dark_geometric.png'）；
}
#容器{
宽度：800px；
高度：705px；
溢出：隐藏；
}
.photobanner{
高度：233px；
宽度：3550px；
边缘底部：80px；
}
/*关键帧动画*/
.首先{
-webkit动画：bannermove 30s线性无限；
-moz动画：bannermove 30s线性无限；
-ms动画：bannermove 30s线性无限；
-o-动画：bannermove 30s线性无限；
动画：bannermove 30s线性无限；
}
@关键帧“bannermove”{
0% {
边际上限：0px；
}
100% {
利润上限：-2125px；
}
}
@-moz关键帧bannermove{
0% {
边际上限：0px；
}
100% {
利润上限：-2125px；
}
}
@-webkit关键帧“bannermove”{
0% {
边际上限：0px；
}
100% {
利润上限：-2125px；
}
}
@-ms关键帧“bannermove”{
0% {
边际上限：0px；
}
100% {
利润上限：-2125px；
}
}
@-o-关键帧“bannermove”{
0% {
边际上限：0px；
}
100% {
利润上限：-2125px；
}
}
HTML:
如果有人能帮我指出正确的方向，我会非常感激。刚刚开始学习。

图像不是块级元素，因此如果需要让图像显示在另一个下面，并使用
边距顶部
属性设置动画，则应向其添加
显示：块
设置

链接的示例不需要这样做，因为这是一个水平滚动，默认情况下，所有这些图像元素一个接一个排列在一起

正文{
背景：url（'http://lorempixel.com/600/400/abstract/1');
}
#容器{
宽度：800px；
高度：600px；/*根据需要修改，最好设置为图像高度的倍数*/
溢出：隐藏；
}
.photobanner{
宽度：3550px；
高度：200px；/*根据需要修改，这是每个图像的高度*/
边缘底部：80px；
}
.首先{
动画：bannermove 30s线性无限；
}
img{
显示：块；
}
@关键帧横幅移动{
0% {
边际上限：0px；
}
100% {
页边距顶部：-1600px；/*容器高度-（图像数量-1）*图像高度*/
}
}
Ohh-wow我不知道您需要明确地说display:block。我想你可以把它们垂直排列。谢谢！ 
<style>
  body {
    background: url('images/dark_geometric.png');
  }
  #container {
    width: 800px;
    height: 705px; 
    overflow: hidden;
  }
  .photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 80px;
  }
  /*keyframe animations*/
  .first {
    -webkit-animation: bannermove 30s linear infinite;
    -moz-animation: bannermove 30s linear infinite;
    -ms-animation: bannermove 30s linear infinite;
    -o-animation: bannermove 30s linear infinite;
    animation: bannermove 30s linear infinite;
  }
  @keyframes "bannermove" {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
  @-moz-keyframes bannermove {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
  @-webkit-keyframes "bannermove" {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
  @-ms-keyframes "bannermove" {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
  @-o-keyframes "bannermove" {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
</style>

<body>
  <div id="container">
    <div class="photobanner">
      <img class="first" src="images/rsz_event1.png" alt="">
      <img src="images/rsz_event2.png" alt="">
      <img src="images/rsz_event3.png" alt="">
      <img src="images/rsz_event4.png" alt="">
      <img src="images/rsz_event5.png" alt="">
      <img src="images/rsz_event6.png" alt="">
      <img src="images/rsz_event7.png" alt="">
      <img src="images/rsz_event8.png" alt="">
      <img src="images/rsz_event1.png" alt="">
      <img src="images/rsz_event2.png" alt="">
      <img src="images/rsz_event3.png" alt="">
      <img src="images/rsz_event4.png" alt="">
    </div>
  </div>
</body>