background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Блок для сайта с эффектом css3 анимации

css3 анимация
Просмотров: 1383  Скачан: 195 раз  Комментариев в теме: 0

Красивый плакат (блок) для сайта с потрясающим эффектом анимации, реализованным на чистом css3. Добиться такого эффекта удаётся с помощью свойства -webkit-perspective (css3 Анимация), интересный тот факт, что такое чудо работает не во всех браузерах, а лишь в последних версиях Safari и Chrome, таким образом если вы хотите сполна насладиться всей этой красотой, то воспользуйтесь браузерами Safari или Chrome. Откройте демонстрационную страницу,  наведите курсор на плакат, и вы будете удивлены.

Шаг 1 - создание разметки

 

HTML

<div id="content">
    <ul id="movieposters">
        <li>
            <img src="images/1.jpg" alt="Iron Man 2" />
            <div class="movieinfo">
                <h3>Iron Man 2</h3>
                <p>With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...</p>
                <a href="#" title="Iron Man 2">More info</a>
            </div>
        </li>
        <li>
            <img src="images/2.jpg" alt="The Last Airbender" />
            <div class="movieinfo">
                <h3>The Last Airbender</h3>
                <p>The story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his...</p>
                <a href="#" title="The Last Airbender">More info</a>
            </div>
        </li>
        <li>
            <img src="images/3.jpg" alt="Tron Legacy" />
            <div class="movieinfo">
                <h3>Tron Legacy</h3>
                <p>Sam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father's disappearance and finds...</p>
                <a href="#" title="Tron Legacy">More info</a>
            </div>
        </li>
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Kenburner слайдерKenburner слайдер

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......
Интересные публикации:

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Шаблон EnvisionШаблон Envision

Качественный HTML шаблон Envision, на главной странице располагается красивый слайдер, есть галерея, контактная форма, табы, набор кнопок......

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Web HostingWeb Hosting

Современный html шаблон хостинг провайдера с готовым набором нужных страниц, имеется таблица тарифных планов, контактная форма....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 6 )

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

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить