Question

我正在与我的同事一起更新我的工作网站，我们有一个很棒的想法让我们的赞助商滚动到屏幕的底部，以便更容易地看到所有这些并使它看起来比以前更整洁设计。问题是，我们还没有弄清楚如何让图像在同一行上滚动。我们目前正在使用HTML5和CSS来尝试解决这个问题，但没有运气。我尝试按照一个有人推出的精彩教程，但它是在HTML5之前制作的，因此似乎不起作用，这就是我所关注的https://designshack.net/articles/css/infinitephotobanner/我当然可能是互相错误的数字，所以我需要一些解释。我会在一段时间内包含我的代码，看看是否有人能看到我的错误并纠正我，我需要一组额外的经验丰富的眼睛。奇怪的是，它似乎几乎在这里工作，但它并没有为我的网页工作。有什么建议？图像都是在不同的行上进行的，只有顶部是滚动的。

＆＃13;

style.css
/*body and container*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: url('dark_geometric.png');
}

#container {
  width: 1000px;
  overflow: hidden;
  margin: 50px auto;
  background: white;
}


/*header*/

header {
  width: 800px;
  margin: 40px auto;
}

header h1 {
  text-align: center;
  font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}

header p {
  font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
  text-align: justify;
}


/*photobanner*/

.photobanner {
  height: 75px;
  width: 3550px;
  margin-bottom: 80px;
}

.photobanner img {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.photobanner img:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  cursor: pointer;
  -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}


/*keyframe animations*/

.first {
  -webkit-animation: bannermove 30s linear infinite;
  -moz-animation: bannermove 30s linear infinite;
  -ms-animation: bannermove 30s linear infinite;
  animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

＆＃13;

<?xml version="1.0" encoding="UTF-8"?>
<?pcf-stylesheet path="/_resources/xsl/usu.xsl" site="1_XSL" extension="php"?>
  <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">			
			<!-- Testing out the scroller -->
	
		<head>
			<meta charset="utf-8"/>
			<meta name="description" content="description">
				<title>Coperate Aggie Sponsers</title>
				<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
			</meta>
		</head>			
		<body>
			<div id="container">
			<header>
				<h1>Coperate Aggie Sponsers</h1>
				</header>
			<div class="photobanner">
					<a href="https://www.l3t.com/"><img class="first" src="{{f:21250202}}" width="125"                     height="75"/></a>
          <a href="http://www8.hp.com/us/en/home.html"><img src="{{f:21250199}}" width="75"                       height="75"/></a>
          <a href="https://www.conservice.com/"><img src="{{f:21250197}}" width="266" height="75"/></a>
          <a href="http://ramcompany.com/wordpress/"><img src="{{f:21250201}}" width="150"                       height="75"/></a>
          <a href="http://www.imflash.com/"><img src="{{f:21250195}}" width="236" height="75"/></a>
          <a href="http://www.tecuity.com/"><img src="{{f:21250200}}" width="186" height="75"/></a>
          <a href="https://www.vivint.com/"><img src="{{f:21250196}}" width="256" height="75"/></a>
          <a href="https://state.nationalguard.com/utah"><img src="{{f:21250198}}" width="92"                     height="75"/></a>
          <a href="https://www.l3t.com/"><img src="{{f:21250202}}" width="125"                     height="75"/></a>
          <a href="http://www8.hp.com/us/en/home.html"><img src="{{f:21250199}}" width="75"                       height="75"/></a>
          <a href="https://www.conservice.com/"><img src="{{f:21250197}}" width="266" height="75"/></a>
          <a href="http://ramcompany.com/wordpress/"><img src="{{f:21250201}}" width="150"                       height="75"/></a>
          <a href="http://www.imflash.com/"><img src="{{f:21250195}}" width="236" height="75"/></a>
          <a href="http://www.tecuity.com/"><img src="{{f:21250200}}" width="186" height="75"/></a>
          <a href="https://www.vivint.com/"><img src="{{f:21250196}}" width="256" height="75"/></a>
          <a href="https://state.nationalguard.com/utah"><img src="{{f:21250198}}" width="92"                     height="75"/></a>
			</div>
		</div>	
		</body>
			<!-- /com.omniupdate.div -->

＆＃13;

图片本身不显示在这里，因为它是网页本身的内部参考，但概念就在那里。

Answer 1

根据您的参考，您似乎已经错误地实施了动画。您需要将以下内容添加到.photobanner CSS：

animation-play-state: running;
animation: bannermove 30s linear infinite;

以下是您提供的相同参考的示例代码集，但处于工作状态：https://codepen.io/anon/pen/mPXgbW

尝试使用多个图像制作一个永无止境的图像滚动条，但我被卡住了，任何提示？

1 个答案: