ZorNet.Ru — сайт для вебмастера » HTML и CSS » Оригинальное оформление стрелок на CSS

Оригинальное оформление стрелок на CSS

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

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

При открытие страницы:

Стрелки на CSS

Здесь навели курсор:

Стрелки в SVG и CSS

Установочный процесс:

HTML

Код

<a class="strelki_dlya_blokana" href="#link">Переходим по ссылке
  <svg class="strelki_dlya_blokana-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="strelki_dlya_blokana-iconcircle" cx="16" cy="16" r="15.12"></circle>
  <path class="strelki_dlya_blokana-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
  </g>
  </svg>
</a>

CSS

Код

.strelki_dlya_blokana {
  color: #1661a2;
  cursor: pointer;
  text-decoration: none;
  font-size: 18px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  margin: 15px;
}
.strelki_dlya_blokana .strelki_dlya_blokana-icon {
  position: relative;
  top: -1px;
  transition: transform 0.3s ease;
  vertical-align: middle;
}
.strelki_dlya_blokana .strelki_dlya_blokana-iconcircle {
  transition: stroke-dashoffset .3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}
.strelki_dlya_blokana:hover .strelki_dlya_blokana-icon {
  transform: translate3d(5px, 0, 0);
}
.strelki_dlya_blokana:hover .strelki_dlya_blokana-iconcircle {
  stroke-dashoffset: 0;
}

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

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

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

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

Так она выглядит после установки, но при наведение она начинает двигаться в перед и возвращается по умолчанию.

Анимационная стрелка для сайта

HTML

Код

CSS

Код

.navernyaka-stelkidem {
  cursor: pointer;
  position: relative;
  width: 80px;
  height: 50px;
  margin: 20px;
}
.navernyaka-stelkidem div {
  position: relative;
  top: 20px;
  width: 90px;
  height: 10px;
  background-color: #115692;
  box-shadow: 0 3px 5px rgba(31, 30, 30, 0.2);
  left: 0;
  display: block;
}
.navernyaka-stelkidem div::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 10px;
  top: -11px;
  right: -8px;
  background-color: #115692;
  transform: rotate(45deg);
}
.navernyaka-stelkidem div::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 10px;
  top: 11px;
  right: -8px;
  background-color: #115692;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  transform: rotate(-45deg);
}
.navernyaka-stelkidem:hover {
  animation: arrow-1 1s linear infinite;
}
@keyframes arrow-1 {
  0% {
  left:0;
  }
  50% {
  left:10px;
  }
  100% {
  left:0;
  }
}

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

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

Как сделать стрелку на CSS при помощи transform

HTML

Код

<div class="vepadayus-kesanegod">
Здесь оставляем тематическое описание.
<span class="kudesamid-mavelukan"></span>
</div>

CSS

Код

.vepadayus-kesanegod {
  background-color: #e4e4e4;
  border-bottom: 2px solid #33a4e2;
  border-radius: 5px;
  color: #5a5454;
  font-family: open-sans,sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  line-height: 21px;
  padding: 23px 26px;
  position: relative;
  text-align: left;
}

.kudesamid-mavelukan {
  background-color: #eae5e5;
  border-bottom: 1px solid #036ed7;
  border-left: 1px solid #0366d7;
  bottom: -1px;
  display: inline-block;
  height: 12px;
  left: 50px;
  position: absolute;
  transform: matrix(0.7071, -0.7071, 0.7071, 0.7071, -2, 6);
  width: 12px;
  z-index: 2;
}

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

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

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

07 Октября 2019 Загрузок: 1 Просмотров: 1132 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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