ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированные стрелки с помощью CSS

Анимированные стрелки с помощью CSS

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

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

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

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

Вариант 1:

Простой вариант с hover-эффектом при наведение курсора, где стрелка выставлена по правую сторону, т когда наводишь курсор, то она немного вытягивается.

HTML

Код

CSS

Код

.mendousd-kierienced {
  cursor: pointer;
  position: relative;
  width: 75px;
  height: 48px;
  margin: 15px;
}
.mendousd-kierienced div {
  position: relative;
  top: 15px;
  width: 112px;
  height: 10px;
  background-color: #185a92;
  box-shadow: 0 3px 5px rgba(14, 14, 14, 0.2);
  left: 0;
  display: block;
}
.mendousd-kierienced div::after {
  content: '';
  position: absolute;
width: 40px;
  height: 10px;
  top: -11px;
  right: -8px;
  background-color: #255b88;
  transform: rotate(45deg);
}
.mendousd-kierienced div::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 10px;
  top: 11px;
  right: -8px;
  background-color: #265b88;
  box-shadow: 0 3px 5px rgba(14, 14, 14, 0.2);
  transform: rotate(-45deg);
}
.mendousd-kierienced:hover {
  animation: arrow-1 1s linear infinite;
}
@keyframes arrow-1 {
  0% {
  left:0;
  }
  50% {
  left:10px;
  }
  100% {
  left:0;
  }
}

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

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

Вариант 2:

Всем знакомая стрелка, где аналогично идет с hover-эффектом при наведение курсора.

HTML

Код

CSS

Код

.kequesugivon-2-top,
.kequesugivon-2-bottom {
  background: #337AB7;
  height: 8px;
  left: -25px;
  position: absolute;
  top: 55px;
  width: 100px;
}
.kequesugivon-2-top {
  top: 58px;
}
.kequesugivon-2-top {
  transform: rotate(45deg);
  transform-origin: bottom right;
}
.kequesugivon-2-bottom {
  transform: rotate(-45deg);
  transform-origin: top right;
}
.kequesugivon-2-top::after,
.kequesugivon-2-bottom::after {
  background: #1a1a25;
  content: '';
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.20s;
}
.kequesugivon-2-top::after {
  left: 100%;
  right: 0;
  transition-delay: 0s;
}
.kequesugivon-2-bottom::after {
  left: 0;
  right: 100%;
  transition-delay: 0.20s;
}
.kequesugivon-2:hover .kequesugivon-2-top::after {
  left: 0;
  transition-delay: 0.20s;
}
.kequesugivon-2:hover .kequesugivon-2-bottom::after {
  right: 0;
  transition-delay: 0s;
}

Такой стиль можно больше увидеть на слайдах, где ставят по сторонам, хотя может указать просто направление, где прямая обязанность за этим установлена.

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

Вариант 3:

Отличное решение дизайна для стрелки, которое указывает направление на сайте.

HTML

Код

<a class="demization_campaigus" href="#link">ZorNet.Ru — сайт для вебмастера
  <svg class="demization_campaigus-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <g fill="none" stroke="#337AB7" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
  <circle class="demization_campaigus-iconcircle" cx="16" cy="16" r="15.12"></circle>
  <path class="demization_campaigus-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
  </g>
  </svg>
</a>

CSS

Код

.demization_campaigus {
  color: #175890;
  cursor: pointer;
  text-decoration: none;
  font-size: 21px;
  height: 21px;
  line-height: 21px;
  display: inline-block;
  margin: 23px;
}
.demization_campaigus .demization_campaigus-icon {
  position: relative;
  top: -1px;
  transition: transform 0.4s ease;
  vertical-align: middle;
}
.demization_campaigus .demization_campaigus-iconcircle {
  transition: stroke-dashoffset .4s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}
.demization_campaigus:hover .demization_campaigus-icon {
  transform: translate3d(5px, 0, 0);
}
.demization_campaigus:hover .demization_campaigus-iconcircle {
  stroke-dashoffset: 0;
}

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

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

Вариант 4:

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

HTML

Код

<div class="lacedsven-sekancud lacedsven-sekancud-top">
  Стрелка показывает вверх
</div>

<div class="lacedsven-sekancud lacedsven-sekancud-bottom">
  Стрелка эта вниз
</div>

<div class="lacedsven-sekancud lacedsven-sekancud-left">
  Стрелка по левую сторону
</div>

<div class="lacedsven-sekancud lacedsven-sekancud-right">
  Стрелка по правую сторону
</div>

CSS

Код

.lacedsven-sekancud {
  background: #194c77;
  text-align: center;
  color: #f9f3f3;
  padding: 18px;
  margin: 18px;
}
.lacedsven-sekancud-top,
.lacedsven-sekancud-bottom,
.lacedsven-sekancud-right,
.lacedsven-sekancud-left {
  position: relative;
  z-index: 10;
}
.lacedsven-sekancud-top::after,
.lacedsven-sekancud-bottom::after,
.lacedsven-sekancud-right::after,
.lacedsven-sekancud-left::after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border: 0;
}
.lacedsven-sekancud-top::after {
  border-left: 10px solid rgba(0, 0, 0, 0);
  border-right: 10px solid rgba(0, 0, 0, 0);
  margin-left: -10px;
  left: 50%;
  border-bottom: 10px solid #194c77;
  top: -10px;
}
.lacedsven-sekancud-bottom::after {
  border-left: 10px solid rgba(0, 0, 0, 0);
  border-right: 10px solid rgba(0, 0, 0, 0);
  margin-left: -10px;
  left: 50%;
  border-top: 10px solid #194c77;
  bottom: -10px;
}
.lacedsven-sekancud-right::after {
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
  margin-top: -10px;
  top: 50%;
  border-left: 10px solid #194c77;
  left: auto;
  right: -10px;
}
.lacedsven-sekancud-left::after {
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
  margin-top: -10px;
  top: 50%;
  border-right: 10px solid #194c77;
  left: -10px;
}

Такой стиль идет на подсказки ключевых слов, где тепеть есть выбор, так как по вскем сторонам стрелки представлены в материале.

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

Вариант 5:

Красиво смотрится анимированная стрелка вниз, что теперь на чистом CSS.

HTML

Код

CSS

Код

.kuesconum-kedevelop {
  margin: 30px;
}
.kuesconum-kedevelop span {
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 5px solid #1d5d94;
  border-right: 5px solid #1d5d94;
  transform: rotate(45deg);
  margin: -16px;
  animation: kuesconum-kedevelop 2s infinite;
}
.kuesconum-kedevelop span:nth-child(2){
  animation-delay: -0.2s;
}
.kuesconum-kedevelop span:nth-child(3){
  animation-delay: -0.4s;
}
@keyframes kuesconum-kedevelop {
  0%{
  opacity: 0;
  transform: rotate(45deg) translate(-20px,-20px);
  }
  50%{
  opacity: 1;
  }
  100%{
  opacity: 0;
  transform: rotate(45deg) translate(20px,20px);
  }
}

Также на форуме можете посмотреть другие стрелки, которые смотрятся оригинально.

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

Одним из наиболее часто используемых пятен для стрелок является наверх. Где пользователь или гости всегда может перейти к началу страницы одним щелчком мыши.

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

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

Вообщем такая небольшая коллекция в формате HTML и CSS примеров кодов на стрелки, что представлены в анимированном стиле, наверх, прокрутка вниз, простые и для блоков.

29 Мая 2019 Просмотров: 9065 Комментариев: (0)

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

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

Kosten

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