Создание анимированного значка скачивания с использованием 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);
  }
}