Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Анимированная стрелка прокрутки вниз на CSS

Дата добавления: 05.03.2017 - 15:10
Добавил: Buger
Количество просмотров: 1052
Количество комментариев: 0
Рейтинг материала: 5.0 / 1
Анимированная стрелка прокрутки вниз на CSS
БЕСПЛАТНО
рейтинг 5.0
/
голосов 1
В данном решении предоставлен код красивой анимации стрелки прокрутки вниз. Данная реализация кнопки была выполнена на чистом CSS, что позволяет настроить под свои нужды и не нагружать страницу изображениями.

Все что вам потребуется, это прикрутить к ней обработчик на JS.

Давайте приступим к установке этой красивой кнопки.

Для начала мы зададим HTML разметку для кнопки:
Код
<div class="container">
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
  <span class="text">Прокрутить вниз</span>
  </div>

Отлично!
Теперь укажем CSS стили, которые отвечают за ее анимацию и вид:
Код
<style class="cp-pen-styles">
  body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #333;
  margin: 0;
  paddind: 0;
}
   
  .container {
  position: relative;
  width: 24px;
  height: 24px;
  }
   
  .chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
  }
   
  .chevron:first-child {
  animation: move 3s ease-out 1s infinite;
  }
   
  .chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
  }
   
  .chevron:before,
  .chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
  }
   
  .chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
  }
   
  .chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
  }
   
  @keyframes move {
  25% {
  opacity: 1;
  }
  33% {
  opacity: 1;
  transform: translateY(30px);
  }
  67% {
  opacity: 1;
  transform: translateY(40px);
  }
  100% {
  opacity: 0;
  transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
  }
   
  .text {
  display: block;
  margin-top: 75px;
  margin-left: -30px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
  }
   
  @keyframes pulse {
  to {
  opacity: 1;
  }
  }
  </style>

На этом все, с дизайном мы разобрались. Но повторюсь...

Это только вид кнопки, а не рабочий вариант с подключенным обработчиком. Так что вам еще нужно прикрутить к ней плагин, который будет выполнять свои функции

Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.