http://designshack.net/articles/css/...tephotobanner/
para un scroll de imagenes pero no puedo agregarles link, hao esto y no funciona que puede ser?
Código:
<div id="container"> <div class="photobanner"> <a href="http://67.23.231.40/~baldia/?page_id=101&hor=1"> <img src="wp-content/themes/brownaldia/img/01.jpg" class="first"></a> <a href="http://67.23.231.40/~baldia/?page_id=101&hor=2"><img src="wp-content/themes/brownaldia/img/02.jpg" ></a> <a href="http://67.23.231.40/~baldia/?page_id=101&hor=3"><img src="wp-content/themes/brownaldia/img/03.jpg" ></a> <a href="http://67.23.231.40/~baldia/?page_id=101&hor=3"><img src="wp-content/themes/brownaldia/img/04.jpg" ></a> <img src="wp-content/themes/brownaldia/img/05.jpg" > <img src="wp-content/themes/brownaldia/img/06.jpg" > <img src="wp-content/themes/brownaldia/img/07.jpg" > <img src="wp-content/themes/brownaldia/img/08.jpg" > <img src="wp-content/themes/brownaldia/img/09.jpg" > <img src="wp-content/themes/brownaldia/img/10.jpg" > <img src="wp-content/themes/brownaldia/img/11.jpg" > <img src="wp-content/themes/brownaldia/img/12.jpg" > <img src="wp-content/themes/brownaldia/img/01.jpg" > <img src="wp-content/themes/brownaldia/img/02.jpg" > <img src="wp-content/themes/brownaldia/img/03.jpg" > </div> </div>
css
Código:
#container { width: 960px; overflow: hidden; margin: 20px auto 0 auto; background: white; } /*photobanner*/ .photobanner { height: 100px; width: 3550px; } /*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; } } .photobanner { height: 100px; width: 3550px; } .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; max-width:50px; padding: 0 30px 0 30px; } .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); } .photobanner:hover .first{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -ms-animation-play-state:paused; animation-play-state:paused; }