20:43 Слайдер | |
|
Code Получить код
<style>
.gallery { width:490px; height:140px; padding-top:350px; position:relative; margin:50px auto; } .gallery form {padding:0; margin:0;} .gallery input {position:absolute; left:-9999px;} .gallery label { display:block; width:88px; height:66px; float:left; margin:5px; opacity:0.7; -webkit-transition:0.25s; -o-transition:0.25s; transition:0.25s; } .gallery label:hover {opacity:1;} .gallery input + img { position:absolute; left:50%; top:0; z-index:50; margin-left:-200px; -webkit-transform-style:preserve-3d; -webkit-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform-origin:50% 50% -200px; -o-transform-origin:50% 50% -200px; transform-origin:50% 50% -200px; } .gallery label img {width:88px; margin:0;} .gallery input:checked + img { opacity:1; -webkit-animation:spin1 1s forwards linear; z-index:100; -o-animation:spin1 1s forwards linear; z-index:100; animation:spin1 1s forwards linear; z-index:100; } .gallery input:not(:checked) + img { -webkit-animation:spin2 1s forwards linear; -o-animation:spin2 1s forwards linear; animation:spin2 1s forwards linear; } @-webkit-keyframes spin1 { 0% {-webkit-transform: perspective(1200px) rotateY(-90deg);} 100% {-webkit-transform: perspective(1200px) rotateY(0deg);} } @-webkit-keyframes spin2 { 0% {-webkit-transform: perspective(1200px) rotateY(0deg);} 100% {-webkit-transform: perspective(1200px) rotateY(90deg);} } @-o-keyframes spin1 { 0% {-o-transform: perspective(1200px) rotateY(-90deg);} 100% {-o-transform: perspective(1200px) rotateY(0deg);} } @-o-keyframes spin2 { 0% {-o-transform: perspective(1200px) rotateY(0deg);} 100% {-o-transform: perspective(1200px) rotateY(90deg);} } @keyframes spin1 { 0% {transform: perspective(1200px) rotateY(-90deg);} 100% {transform: perspective(1200px) rotateY(0deg);} } @keyframes spin2 { 0% {transform: perspective(1200px) rotateY(0deg);} 100% {transform: perspective(1200px) rotateY(90deg);} } </style> <div class="gallery"> <form action=""> <input type="radio" name="book" id="p1" checked="checked" /> <img src="http://www.novickiy.ru/_ph/2/2/188720830.jpg?1406996928" alt="" /> <input type="radio" name="book" id="p2" /> <img src="http://www.novickiy.ru/_ph/2/2/308060875.jpg?1406996941" alt="" /> <input type="radio" name="book" id="p3" /> <img src="http://www.novickiy.ru/_ph/3/2/591314717.jpg?1406997016" alt="" /> <input type="radio" name="book" id="p4" /> <img src="http://www.novickiy.ru/_ph/1/2/314747468.jpg?1406997195" alt="" /> <input type="radio" name="book" id="p5" /> <img src="http://www.novickiy.ru/_ph/1/2/42837617.jpg?1406997201" alt="" /> <input type="radio" name="book" id="p6" /> <img src="http://www.novickiy.ru/_ph/6/2/862813091.jpg?1406997315" alt="" /> <input type="radio" name="book" id="p7" /> <img src="http://www.novickiy.ru/_ph/6/2/18797724.jpg?1406997314" alt="" /> <input type="radio" name="book" id="p8" /> <img src="http://www.novickiy.ru/_ph/8/2/770126340.jpg?1406997414" alt="" /> <input type="radio" name="book" id="p9" /> <img src="http://www.novickiy.ru/_ph/8/2/782371487.jpg?1406997417" alt="" /> <input type="radio" name="book" id="p10" /> <img src="http://www.novickiy.ru/_ph/8/2/599836683.jpg?1406997419" alt="" /> <label for="p1"> <img src="http://www.novickiy.ru/_ph/2/2/188720830.jpg?1406996928" alt="" /> </label> <label for="p2"> <img src="http://www.novickiy.ru/_ph/2/2/308060875.jpg?1406996941" alt="" /> </label> <label for="p3"> <img src="http://www.novickiy.ru/_ph/3/2/591314717.jpg?1406997016" alt="" /> </label> <label for="p4"> <img src="http://www.novickiy.ru/_ph/1/2/314747468.jpg?1406997195" alt="" /> </label> <label for="p5"> <img src="http://www.novickiy.ru/_ph/1/2/42837617.jpg?1406997201" alt="" /> </label> <label for="p6"> <img src="http://www.novickiy.ru/_ph/6/2/862813091.jpg?1406997315" alt="" /> </label> <label for="p7"> <img src="http://www.novickiy.ru/_ph/6/2/18797724.jpg?1406997314" alt="" /> </label> <label for="p8"> <img src="http://www.novickiy.ru/_ph/8/2/770126340.jpg?1406997414" alt="" /> </label> <label for="p9"> <img src="http://www.novickiy.ru/_ph/8/2/782371487.jpg?1406997417" alt="" /> </label> <label for="p10"> <img src="http://www.novickiy.ru/_ph/8/2/599836683.jpg?1406997419" alt="" /> </label> </form> </div>
| |
|
Категория: Веб дизайн |
Просмотров: 2589 |
3 голоса
| |
| Всего комментариев: 0 | |