ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированная стрелка вниз на чистом CSS

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

В данной статье представлены стрелки вниз с анимацией, которые выполнены на чистом CSS, где идут в трех вариантах различной формации по дизайну. Вероятнее всего, такое оригинальное решение исполнено для прокрутки вниз. Данная реализация этого оригинального решение позволить настроить под свои нужды, как указатель, где совершенно не будет грузить страницы с изображением. Вероятно кто-то встречал один вариант, виде мышки, что задействуют такой вид многие веб разработчики.

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

Анимированная стрелка вниз виде мыши

HTML

Код

CSS

Код

.myshka-podvala {
  width: 48px;
  height: 86px;
  border: 2px solid #1480dc;
  border-radius: 100px;
  position: relative;
  margin: 18px auto;
  box-sizing: border-box;
}
.myshka-podvala::before {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1b79ca;
  border-radius: 50%;
  opacity: 1;
  animation: wheel 2s infinite;
}
@keyframes wheel {
  to {
  opacity: 0;
  top: 60px;
  }
}

В большинстве почему то такой стиль мышки встречал в самом верху в шапке.

Демонстрация

Стрелка в центре круга с анимацией на CSS3

HTML

Код

CSS

Код

.circular-arrow {
  width: 58px;
  height: 58px;
  border: 2px solid #0c71c7;
  border-radius: 100%;
  position: relative;
  animation: down 1.5s infinite;
  margin: 18px auto 42px auto;
  box-sizing: border-box;
}
.circular-arrow::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 18px;
  width: 18px;
  height: 18px;
  border-left: 2px solid #1062a9;
  border-bottom: 2px solid #1062a9;
  transform: rotate(-45deg);
}
@keyframes down {
  0% {
  transform: translate(0);
  }
  20% {
  transform: translateY(15px);
  }
  40% {
  transform: translate(0);
  }
}

Отличный вариант, где мы наблюдаем круг, а в центре расположена стрелка.

Демонстрация

Оригинальная анимация показа стрелки вниз

HTML

Код

CSS

Код

.most-upstairs {
  height: 68px;
  margin: 18px 0;
}
.storona-uveka {
  width: 0;
  height: 40px;
  border: 1px solid #1165ad;
  position: relative;
  animation: scroll 1.7s infinite;
  margin: auto;
}
.storona-uveka::after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: -5px;
  width: 1px;
  height: 10px;
  border-top: 10px solid #1165ad;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
@keyframes scroll {
  0% {
  height: 40px;
  }
  30% {
  height: 70px;
  }
  60% {
  height: 40px;
  }
}

Здесь мы задействовали несколько классов под анимацию, так как по своему формату она немного отличается от первых двух. Если там мы видим полную кнопку, что идет вверх и вниз, то здесь вверх закреплен, но сама стрелка растягивается.

Демонстрация

Вот в принципе и всё, вероятно есть и другие вариаций, но эти возможно тем отличаются, что созданы на чистом CSS. Где появляется возможность поменять цветовую гамму, и также задать скорость.

13 Июня 2020 Загрузок: 1 Просмотров: 3946 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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