Красивый и эффектный слайдер на CSS3

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Красивый и эффектный слайдер на CSS3

CabinetAdmin 04 авг 2012, 16:21 Сообщение

Красивый и эффектный слайдер на CSS3

Эффектный слайдер работающий на CSS3 без использования JavaScript.
Слайдер работает в автоматическом режиме смены изображений, с функцией паузы при наведении мыши.
Помимо изображений в слайдер можно ставить что угодно, начиная с обычной текстовой информации, заканчивая IFrame.
Каждый блок можно подписать своим названием.

Простая разметка HTML.

Код: Выделить всё

<div id="slider-shadow"> <div id="slider"> <div id="mask"> <ul> <li> <a href="#"><img src="/images/1.png" /></a> </li> <li> <a href="#"><img src="/images/2.png" /></a> <span><h2>Изображение</h2></span> </li> <li> <iframe src="http://cabinetadmina.ru" width="600" height="200" frameborder="0" scrolling="no"></iframe> <span><h2>IFrame</h2></span> </li> <li> <a href="#"><img src="/images/3.png" /></a> </li> </ul> </div> <div id="progress"></div> <div id="overlay"></div> <div id="pause"></div> </div> </div>


Стили для нашего слайдера.

Код: Выделить всё

#slider { width: 600px; height: 200px; margin: 40px auto 0; overflow: visible; background-color: #362c30; border: 10px solid #362c30; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; position: relative; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } #mask { overflow: hidden; } #slider:hover { background-color: #cccccc; border: 10px solid #cccccc; -webkit-animation: rotatey 400ms ease-out; -moz-animation: rotatey 400ms ease-out; } #slider:hover #pause { opacity: 1; } #slider:hover #progress { background-color: rgba(255,255,255,0.0); } #slider:hover ul, #slider:hover #progress, #slider:hover #overlay { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; } #pause { width: 600px; height: 200px; position: absolute; top: 0; opacity: 0; background-image: url('/images/paused.png'); background-position: 566px 10px; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #progress { width: 1px; height: 1px; background-color: #ffd000; -moz-animation: progress 18s infinite; -webkit-animation: progress 18s infinite; position: relative; top: -1px; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #overlay { width: 600px; height: 200px; position: absolute; top: 0; background-image: url('/images/overlay.png'); background-position: center; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; opacity: 0.5; -moz-animation: overlay-fade 18s infinite; -webkit-animation: overlay-fade 18s infinite; } #slider ul { width: 2400px; list-style: none; padding: 0; margin: 0; -moz-animation: slide-animation 18s infinite; -webkit-animation: slide-animation 18s infinite; position: relative; left: 0px; } #slider li { display: inline; width: 600px; height: 200px; margin: 0; padding: 0; float: left; position: relative; background-image: url('/images/loader.gif'); background-position: 50% 50%; background-repeat: no-repeat; } #slider li:last-of-type { background-color: #362c30; } #slider li a { display: block; text-decoration: none; } #slider li span { display: block; width: 560px; padding: 15px 20px; position: absolute; bottom: 0; left: 0; background-color: rgba(54,44,48,0.6); border-top: 1px solid #362c30; text-shadow: 1px 1px 1px #362c30; pointer-events: none; text-align: left; } #slider ul li span h2 { font-size: 24px; line-height: 24px; color: #fff; font-weight: normal; font-family: 'Communist-Regular'; text-shadow: 1px 1px 1px #362c30; } #slider-shadow { width: 100%; height: 260px; background-image: url('/images/slider-shadow.png'); background-position: center bottom; background-repeat: no-repeat; margin: 10px auto 0; } @-webkit-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-moz-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-webkit-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-moz-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-webkit-keyframes rotatey { 0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} } @-moz-keyframes rotatey { 0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} } @-webkit-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} }



Минус этого слайдера состоит только в том, что он не будет работать на старых браузерах, не поддерживающих CSS3. А может быть и не минус...


Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Красивый и эффектный слайдер на CSS3

romaamor 18 янв 2014, 03:50 Сообщение

Поставил себе в шапку эту фишку с рекламными блоками. Но блин, они, блоки, останавлеваются на половине. Еак исправить ? Что за это отвечает ? И как убрать ту жолтую полоску ? Или хотя бы подогнать по длине. Посмотреть можно у меня на форуме в шапке. Блогодарствую.

Аватара пользователя
CabinetAdmin

Re: Красивый и эффектный слайдер на CSS3

CabinetAdmin 18 янв 2014, 06:11 Сообщение

Меняй значения width: 600px; в разных местах кода.
Потом начиная от @-webkit-keyframes slide-animation { и всё вниз, там менять значения, подгонять.
Например был блок width:600px;, нам нужно 800, меняем в этом месте и везде где есть это же значение (и left:-600px; тоже). Потом меняем left:-1200px;, так как блок теперь 800, то вместо 1200 ставим 1600 - left:-1600px;, следующее значение для left плюс ещё 800 - left:-2200px;...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Аватара пользователя
romaamor

Re: Красивый и эффектный слайдер на CSS3

romaamor 18 янв 2014, 07:18 Сообщение

Блин, получается одна пустая ячейка. Если добавить еще один блок рекламы то она всеравно пустая а в конце вылазят сразу два блока. :(

Аватара пользователя
CabinetAdmin

Re: Красивый и эффектный слайдер на CSS3

CabinetAdmin 18 янв 2014, 08:38 Сообщение

Я так полагаю где-то значения не правильные... :unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Красивый и эффектный слайдер на CSS3

romaamor 18 янв 2014, 09:20 Сообщение

CabinetAdmin » 39 минут назад писал(а):Я так полагаю где-то значения не правильные..

Та я уже устал перепроверять. Может я что то упустил ? Шерина 728, толщина 90.

Код: Выделить всё

#slider { width: 728px; height: 90px; margin: 10px auto 0; overflow: visible; background-color: #362c30; border: 10px solid #362c30; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; position: relative; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } #mask { overflow: hidden; } #slider:hover { background-color: #cccccc; border: 10px solid #cccccc; -webkit-animation: rotatey 400ms ease-out; -moz-animation: rotatey 400ms ease-out; } #slider:hover #pause { opacity: 1; } #slider:hover #progress { background-color: rgba(255,255,255,0.0); } #slider:hover ul, #slider:hover #progress, #slider:hover #overlay { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; } #pause { width: 728px; height: 90px; position: absolute; top: 0; opacity: 0; background-image: url('/images/paused.png'); background-position: 566px 10px; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #progress { width: 1px; height: 1px; background-color: #ffd000; -moz-animation: progress 18s infinite; -webkit-animation: progress 18s infinite; position: relative; top: -1px; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #overlay { width: 728px; height: 90px; position: absolute; top: 0; background-image: url('/images/overlay.png'); background-position: center; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; opacity: 0.5; -moz-animation: overlay-fade 18s infinite; -webkit-animation: overlay-fade 18s infinite; } #slider ul { width: 2184px; list-style: none; padding: 0; margin: 0; -moz-animation: slide-animation 18s infinite; -webkit-animation: slide-animation 18s infinite; position: relative; left: 0px; } #slider li { display: inline; width: 728px; height: 90px; margin: 0; padding: 0; float: left; position: relative; background-image: url('/images/loader.gif'); background-position: 50% 50%; background-repeat: no-repeat; } #slider li:last-of-type { background-color: #362c30; } #slider li a { display: block; text-decoration: none; } #slider li span { display: block; width: 90px; padding: 15px 20px; position: absolute; bottom: 0; left: 0; background-color: rgba(54,44,48,0.6); border-top: 1px solid #362c30; text-shadow: 1px 1px 1px #362c30; pointer-events: none; text-align: left; } #slider ul li span h2 { font-size: 24px; line-height: 24px; color: #fff; font-weight: normal; font-family: 'Communist-Regular'; text-shadow: 1px 1px 1px #362c30; } #slider-shadow { width: 100%; height: 90px; background-image: url('/images/slider-shadow.png'); background-position: center bottom; background-repeat: no-repeat; margin: 10px auto 0; } @-webkit-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-728px; opacity:1;} 45% {left:-728px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1456px; opacity:1;} 70% {left:-1456px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-2184px; opacity:1;} 95% {opacity:1;} 98% {left:-2184px; opacity:0;} 100% {left:0px; opacity:0;} } @-moz-keyframes slide-animation { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-728px; opacity:1;} 45% {left:-728px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1456px; opacity:1;} 70% {left:-1456px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-2184px; opacity:1;} 95% {opacity:1;} 98% {left:-2184px; opacity:0;} 100% {left:0px; opacity:0;} } @-webkit-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:728px; opacity:1;} 22.5% {width:728px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:728px; opacity:1;} 47.5% {width:728px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:728px; opacity:1;} 72.5% {width:728px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:728px; opacity:1;} 98% {width:728px; opacity:0;} 100% {width:0px; opacity:0;} } @-moz-keyframes progress { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:728px; opacity:1;} 22.5% {width:728px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:728px; opacity:1;} 47.5% {width:728px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:728px; opacity:1;} 72.5% {width:728px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:728px; opacity:1;} 98% {width:728px; opacity:0;} 100% {width:0px; opacity:0;} } @-webkit-keyframes rotatey { 0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} } @-moz-keyframes rotatey { 0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} } @-webkit-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes overlay-fade { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} }
Последний раз редактировалось romaamor 18 янв 2014, 16:17, всего редактировалось 1 раз.

Аватара пользователя
CabinetAdmin

Re: Красивый и эффектный слайдер на CSS3

CabinetAdmin 18 янв 2014, 10:45 Сообщение

Вроде бы нет, наверно дело в keyframes, в процентах, значениях... :unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Красивый и эффектный слайдер на CSS3

romaamor 22 фев 2014, 14:53 Сообщение

Надо поставить еще одну такую крутюльку. Не будет конфликтов со старой ? Или можно просто новый в кодах обозвать как то по другому. Типа

Код: Выделить всё

#slider2

Аватара пользователя
CabinetAdmin

Re: Красивый и эффектный слайдер на CSS3

CabinetAdmin 22 фев 2014, 15:21 Сообщение

Если такой же класс, будет конфликт. Да, можно просто #slider2.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Красивый и эффектный слайдер на CSS3

romaamor 22 фев 2014, 16:08 Сообщение

В разметке HTML как я понимаю тоже прописывать ?

Код: Выделить всё

<div id="slider2-shadow"> <div id="slider2">

Аватара пользователя
CabinetAdmin

Re: Красивый и эффектный слайдер на CSS3

CabinetAdmin 22 фев 2014, 16:24 Сообщение

Конечно.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Красивый и эффектный слайдер на CSS3

romaamor 22 фев 2014, 16:28 Сообщение

Спасибо. Буду ночью ковыряться. :)

Аватара пользователя
romaamor

Re: Красивый и эффектный слайдер на CSS3

romaamor 23 фев 2014, 18:28 Сообщение

Что то конфликтуют. Так надо ?

Код: Выделить всё

#slider2 { width: 225px; height: 200px; margin: 40px auto 0; overflow: visible; background-color: #362c30; border: 10px solid #362c30; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; position: relative; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } #mask2 { overflow: hidden; } #slider2:hover { background-color: #cccccc; border: 10px solid #cccccc; -webkit-animation: rotatey 400ms ease-out; -moz-animation: rotatey 400ms ease-out; } #slider2:hover #pause { opacity: 1; } #slider2:hover #progress { background-color: rgba(255,255,255,0.0); } #slider2:hover ul, #slider:hover #progress, #slider:hover #overlay { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; } #pause2 { width: 225px; height: 200px; position: absolute; top: 0; opacity: 0; background-image: url('/images/paused.png'); background-position: 566px 10px; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #progress2 { width: 1px; height: 1px; background-color: #ffd000; -moz-animation: progress 18s infinite; -webkit-animation: progress 18s infinite; position: relative; top: -1px; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #overlay2 { width: 225px; height: 200px; position: absolute; top: 0; background-image: url('/images/overlay.png'); background-position: center; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; opacity: 0.5; -moz-animation: overlay-fade 18s infinite; -webkit-animation: overlay-fade 18s infinite; } #slider2 ul { width: 2400px; list-style: none; padding: 0; margin: 0; -moz-animation: slide-animation 18s infinite; -webkit-animation: slide-animation 18s infinite; position: relative; left: 0px; } #slider2 li { display: inline; width: 600px; height: 200px; margin: 0; padding: 0; float: left; position: relative; background-image: url('/images/loader.gif'); background-position: 50% 50%; background-repeat: no-repeat; } #slider2 li:last-of-type { background-color: #362c30; } #slider2 li a { display: block; text-decoration: none; } #slider2 li span { display: block; width: 560px; padding: 15px 20px; position: absolute; bottom: 0; left: 0; background-color: rgba(54,44,48,0.6); border-top: 1px solid #362c30; text-shadow: 1px 1px 1px #362c30; pointer-events: none; text-align: left; } #slider2 ul li span h2 { font-size: 24px; line-height: 24px; color: #fff; font-weight: normal; font-family: 'Communist-Regular'; text-shadow: 1px 1px 1px #362c30; } #slider2-shadow { width: 100%; height: 260px; background-image: url('/images/slider-shadow.png'); background-position: center bottom; background-repeat: no-repeat; margin: 10px auto 0; } @-webkit-keyframes slide-animation2 { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-moz-keyframes slide-animation2 { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-webkit-keyframes progress2 { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-moz-keyframes progress2 { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-webkit-keyframes rotatey2 { 0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} } @-moz-keyframes rotatey2 { 0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} } @-webkit-keyframes overlay-fade2 { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes overlay-fade2 { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} }


и -

Код: Выделить всё

<div id="slider2-shadow"> <div id="slider2"> <div id="mask2"> <ul> <li> <a href="#"><img src="/images/1.png" /></a> </li> <li> <a href="#"><img src="/images/2.png" /></a> <span><h2>Изображение</h2></span> </li> <li> <iframe src="http://cabinetadmina.ru" width="600" height="200" frameborder="0" scrolling="no"></iframe> <span><h2>IFrame</h2></span> </li> <li> <a href="#"><img src="/images/3.png" /></a> </li> </ul> </div> <div id="progress2"></div> <div id="overlay2"></div> <div id="pause2"></div> </div> </div>

И как будет правильно
slider2-shadow или slider-shadow2 ?

Аватара пользователя
CabinetAdmin

Re: Красивый и эффектный слайдер на CSS3

CabinetAdmin 23 фев 2014, 18:55 Сообщение

romaamor » 18 минут назад писал(а):slider2-shadow или slider-shadow2 ?

Хоть так, хоть так.

Вроде как-то так:

Код: Выделить всё

#slider2 { width: 225px; height: 200px; margin: 40px auto 0; overflow: visible; background-color: #362c30; border: 10px solid #362c30; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; position: relative; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } #mask2 { overflow: hidden; } #slider2:hover { background-color: #cccccc; border: 10px solid #cccccc; -webkit-animation: rotatey2 400ms ease-out; -moz-animation: rotatey2 400ms ease-out; } #slider2:hover #pause2 { opacity: 1; } #slider2:hover #progress2 { background-color: rgba(255,255,255,0.0); } #slider2:hover ul, #slider2:hover #progress2, #slider2:hover #overlay2 { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; } #pause2 { width: 225px; height: 200px; position: absolute; top: 0; opacity: 0; background-image: url('/images/paused.png'); background-position: 566px 10px; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #progress2 { width: 1px; height: 1px; background-color: #ffd000; -moz-animation: progress2 18s infinite; -webkit-animation: progress2 18s infinite; position: relative; top: -1px; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; } #overlay2 { width: 225px; height: 200px; position: absolute; top: 0; background-image: url('/images/overlay.png'); background-position: center; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; opacity: 0.5; -moz-animation: overlay-fade2 18s infinite; -webkit-animation: overlay-fade2 18s infinite; } #slider2 ul { width: 2400px; list-style: none; padding: 0; margin: 0; -moz-animation: slide-animation2 18s infinite; -webkit-animation: slide-animation2 18s infinite; position: relative; left: 0px; } #slider2 li { display: inline; width: 600px; height: 200px; margin: 0; padding: 0; float: left; position: relative; background-image: url('/images/loader.gif'); background-position: 50% 50%; background-repeat: no-repeat; } #slider2 li:last-of-type { background-color: #362c30; } #slider2 li a { display: block; text-decoration: none; } #slider2 li span { display: block; width: 560px; padding: 15px 20px; position: absolute; bottom: 0; left: 0; background-color: rgba(54,44,48,0.6); border-top: 1px solid #362c30; text-shadow: 1px 1px 1px #362c30; pointer-events: none; text-align: left; } #slider2 ul li span h2 { font-size: 24px; line-height: 24px; color: #fff; font-weight: normal; font-family: 'Communist-Regular'; text-shadow: 1px 1px 1px #362c30; } #slider2-shadow { width: 100%; height: 260px; background-image: url('/images/slider-shadow.png'); background-position: center bottom; background-repeat: no-repeat; margin: 10px auto 0; } @-webkit-keyframes slide-animation2 { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-moz-keyframes slide-animation2 { 0% {opacity:0;} 2% {opacity:1;} 20% {left:0px; opacity:1;} 22.5% {opacity:0.6;} 25% {left:-600px; opacity:1;} 45% {left:-600px; opacity:1;} 47.5% {opacity:0.6;} 50% {left:-1200px; opacity:1;} 70% {left:-1200px; opacity:1;} 72.5% {opacity:0.6;} 75% {left:-1800px; opacity:1;} 95% {opacity:1;} 98% {left:-1800px; opacity:0;} 100% {left:0px; opacity:0;} } @-webkit-keyframes progress2 { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-moz-keyframes progress2 { 0% {width:0px; opacity:0;} 2% {width:0px; opacity:1;} 20% {width:600px; opacity:1;} 22.5% {width:600px; opacity:0;} 22.59% {width:0px;} 25% {width:0px; opacity:1;} 45% {width:600px; opacity:1;} 47.5% {width:600px; opacity:0;} 47.59% {width:0px;} 50% {width:0px; opacity:1;} 70% {width:600px; opacity:1;} 72.5% {width:600px; opacity:0;} 72.59% {width:0px;} 75% {width:0px; opacity:1;} 95% {width:600px; opacity:1;} 98% {width:600px; opacity:0;} 100% {width:0px; opacity:0;} } @-webkit-keyframes rotatey2 { 0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} } @-moz-keyframes rotatey2 { 0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} } @-webkit-keyframes overlay-fade2 { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes overlay-fade2 { 0% {opacity:0;} 2% {opacity:0.5;} 95% {opacity:0.5;} 98% {opacity:0;} 100% {opacity:0;} }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость