Создание анимированного значка скачивания с использованием CSS
23 июня 2015 | Опубликовано в css | 2 Комментариев »
Если на веб-странице размещается элемент, призывающий к действию, то обычно нужно, чтобы пользователь что-то сделал, например подписался на новостную рассылку или что-то скачал. Хорошо, если элементы, призывающие к действию, как-то выделяются, чтобы люди обратили внимание на эти области веб-сайта.
В этом уроке мы создадим анимированный с помощью CSS значок скачивания. Посмотрите пример, чтобы увидеть анимацию.
Код HTML
Начнем с создания кода HTML для значка скачивания, нам понадобятся ссылка и расположенная в ней область для значка скачивания:
<a href="http://www.example.com/download-content.html" class="download-icon"> <span></span> Download </a>
Задаем стили значку скачивания
Для начала зададим стили тексту, расположенному под значком, этот текст используется, чтобы объяснить, к какому действию призывает значок:
a.download-icon { color: #333; font-size: 1.3rem; font-weight: bold; text-decoration: none; }
После этого зададим стили для значка скачивания, начнем со стилей для тега span, создадим прямоугольник с помощью свойств ширины и высоты, затем добавим ему рамку. Задание свойству верхней рамки значения прозрачности спрячет верхнюю часть рамки, создавая внешний вид блока скачивания:
.download-icon span { display: block; cursor: pointer; position: relative; width: 60px; height: 30px; margin: auto; border: 10px solid #333; border-top: transparent; }
Чтобы создать стрелку на значке скачивания, воспользуемся псевдоэлементами CSS :before и :after. У них должно быть абсолютное позиционирование, чтобы можно было задать точное расположение стрелки:
.download-icon span:before, .download-icon span:after { content: ''; display: block; position: absolute; }
При наведении указателя мыши на значок скачивания появится стрелка с анимацией эффекта подпрыгивания. Воспользуемся свойством анимации, чтобы задать анимацию подпрыгивания, добавим время, за которое анимация должна быть закончена, и зададим бесконечное проигрывание анимации.
С помощью псевдоэлемента :before создадим линию стрелки, начнем с того, что расположим ее над значком и изобразим линию с помощью свойств ширины и высоты, а также цвета фона.
А с помощью псевдоэлемента :after создадим треугольник, используя возможности CSS, задавая рамку и делая ее левую и правую стороны прозрачными:
a.download-icon:hover span:before, a.download-icon:hover span:after { animation: bounce .5s infinite alternate; -webkit-animation: bounce .5s infinite alternate; } a.download-icon:hover span:before{ left: 15px; top: -9px; width: 10px; height: 10px; background: #333; } a.download-icon:hover span:after { left: 10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; }
Анимация подпрыгивания
И, наконец, создадим анимацию подпрыгивания, для этого нужно изменить расположение элемента на несколько пикселей. Чтобы это сделать, воспользуемся свойством трансформации, изменяя положение по оси Y с помощью значения translateY на -10px. Таким образом элемент поднимется вверх на 10 пикселей, а в конце анимации нужно будет вернуть его назад на 0 пикселей:
@keyframes bounce { from { transform: translateY(-10px); } to { transform: translateY(0); } } @-webkit-keyframes bounce { from { -webkit-transform: translateY(-10px); } to { -webkit-transform: translateY(0); } }
Автор урока Paul Underwood
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191