20.08.2013, 19:57 | |||||
Слайдер на CSS3Сегодня я хотел бы показать вам, как создать красивый и легкий слайдер на CSS3. Он использует эффект плавного переключения между слайдами. Кроме того, вы можете использовать пользовательский рекламный текст для каждого слайда. Мы будем использовать основные UL-LI ненумерованного списка, чтобы сделать этот слайдер. Для просмотра не нужно, где либо кликать при переключении слайдов - все работает автоматически (CSS3 анимация). Шаг 1. HTML Разметка HTML очень простая. Состоит из четырех пунктов списка. Каждый слайд состоит из изображения (как фон) и рекламный текст в DIV. При необходимости, легко можно слайды добавить. Код <div class="slides"> <ul> <!-- slides --> <li><img src="images/pic1.jpg" alt="image01" /> <div>Promo text #1</div> </li> <li><img src="images/pic2.jpg" alt="image02" /> <div>Promo text #2</div> </li> <li><img src="images/pic3.jpg" alt="image03" /> <div>Promo text #3</div> </li> <li><img src="images/pic4.jpg" alt="image04" /> <div>Promo text #4</div> </li> </ul> </div> Шаг 2. CSS Теперь определим стили CSS для нашего слайдера. Вот стили для основного элемента слайдера, пункта списка и рекламного текста: Код /* fade slider */ .slides { height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; } .slides ul { list-style:none; position:relative; } /* keyframes #anim_slides */ @-webkit-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } .slides ul li { opacity:0; position:absolute; top:0; /* css3 animation */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div { -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; } .slides ul li:nth-child(3), .slides ul li:nth-child(3) div { -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; } .slides ul li:nth-child(4), .slides ul li:nth-child(4) div { -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; } .slides ul li img { display:block; } /* keyframes #anim_titles */ @-webkit-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } @-moz-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } .slides ul li div { background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; font-size:26px; left:10%; margin:0 auto; padding:20px; position:absolute; top:50%; width:200px; /* css3 animation */ -webkit-animation-name: anim_titles; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } ДЕМО Материал взят с сайта infoscript.ru
Теги: Скачать Слайдер на CSS3
| |||||
Категория: Полезное | Просмотров: 1847 | Добавил: Skaiman | Рейтинг: 0.0/0 | | |||||
Всего комментариев: 1
|
||||||
|
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).