Sto tentando di ricreare la galleria immagini di questo tutorial però nonostante abbia seguito alla lettera le istruzioni non funziona.
A me viene così:
A me viene così:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="html5shiv.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Animated Photo Banner</h1>
<p>An animated banner of photos that automatically scrolls horizontally through an infinite loop. The best part: no JavaScript!
It also uses individual images inserted via HTML, not simply one long repeating CSS background. <a href="http://designshack.net/articles/css/infinitephotobanner/">Click here</a>
to return to the tutorial on Design Shack.</p>
</header>
<!-- Each image is 350px by 233px -->
<div class="photobanner">
<img class="first" src="image-1.jpg" alt="" />
<img src="image-2.jpg" alt="" />
<img src="image-3.jpg" alt="" />
<img src="image-4.jpg" alt="" />
<img src="image-5.jpg" alt="" />
<img src="image-6.jpg" alt="" />
<img src="image-1.jpg" alt="" />
<img src="image-2.jpg" alt="" />
<img src="image-3.jpg" alt="" />
<img src="image-4.jpg" alt="" />
</div>
</div>
</body>
</html>
Codice:
* {
margin: 0;
padding: 0;
}
body {
<!-- src: http://subtlepatterns.com/?p=1045 -->
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: 233px;
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;
-o-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;}
}
