Я обновляю веб-сайт на моей работе с моим коллегой, и у нас была отличная идея, чтобы наши спонсоры прокручивали внизу экрана, чтобы было удобнее видеть их все и чтобы он выглядел немного аккуратнее, чем предыдущий конструкций. Проблема в том, что нам еще предстоит выяснить, как заставить изображения прокручиваться на одной строке. В настоящее время мы используем HTML5 и CSS, чтобы попытаться решить эту проблему, но безуспешно. Я пытался следовать удивительному учебнику, который кто-то выпустил, но он был сделан до HTML5 и, следовательно, не работает, это то, что я следую https://designshack.net/articles/css/infinitephotobanner/ Я, конечно, могу неправильно вводить числа, поэтому мне нужны некоторые объяснения , Я включу свой код через минуту, чтобы увидеть, если кто-то может увидеть мою ошибку и исправить меня, мне нужен дополнительный набор более опытных глаз. Странно то, что здесь, похоже, почти все работает, но для моей веб-страницы это совсем не работает. Какие-либо предложения? Все изображения появляются на разных строках, и прокручивается только верхняя.
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;
}
}
<?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 -->
Сами изображения здесь не показаны, потому что это внутренняя ссылка на самой веб-странице, но концепция есть.