Простое слайд-шоу на CSS3

Приветствуем Вас на сайте!

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

Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"

Вход на сайт

Логин:

Пароль:

Вход

Войти по Логину и Паролю

О нас

Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!

Войти | Зарегистрироваться

Настройки

Анимация Шапки

Анимация Футера

Автообновление Чата

Автообновление Статистики

Звуковые Оповещения

Авто Подгрузка Материалов

Перезагрузите страницу

Простое слайд-шоу на CSS3

Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков. В наши дни, слайд-шоу можно встретить практически на любом сайте. Большинство из них используют JavaScript для смены изображений, некоторые используют Flash. Проблемы с просмотром изображений могут возникнуть лишь в том случае, если браузер пользователя не поддерживает ни того ни другого. В сегодняшней статье вы узнаете, как можно создать слайд-шоу c помощью CSS и HTML не используя ни каких скриптов.

Установка:
1. В таблицу стилей вставляем код:

Код

@keyframes fade {
  0% { opacity: 0; }
  11.11% { opacity: 1; }
  33.33% { opacity: 1; }
  44.44% { opacity: 0; }
  100% { opacity: 0; }
}
.fadein { position:relative; height:312px; width:500px;}
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }

2. Html код слайдера:

Код

Поделиться новостью в социальной сети.

Добавил: Best_Studio

Дата добавления: 17.01.2016 в 15:35 по МСК

Категория: Скрипты для uCoz

Просмотров: 642

Комментариев: 0

Рейтинг:

1

2

3

4

5

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Скрипты для uCoz [115]	Графика для uCoz [11]
Шаблоны для uCoz [40]	posts [0]