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

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

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

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

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

Так выглядит в одной палитре, но элементы все просматриваются.

Так смотрится на темном фоне.

Здесь цветовую гамму можно подобрать самому веб разработчику под свой дизайн.

Приступаем к установке:

HTML

Код

<div class="psanted-kaoades"> <a href="http://zornet.ru">ZorNet.Ru - портал для вебмастера</a></div>

CSS

Код

@keyframes blinkcolor {
  30%{
  color: #ce3937;
  }
  70%{
  color: #214052;
  }
  100%{
  color: #34a50c;
  }
}

@keyframes moveleft {
  0%{
  transform: translate(0px);
  }
  50%{
  transform: translate(20px);
  }
  100%{
  transform: translate(0px);
  }
}
@keyframes moveright {
  0%{
  transform: translate(0px);
  }
  50%{
  transform: translate(-20px);
  }
  100%{
  transform: translate(0px);
  }
}
.theme-details .psanted-kaoades {
  font-size: 23px;
}
.psanted-kaoades {
  text-align: center;
  font-size: 30px;
  padding-top: 50px;
}
.psanted-kaoades a {
  color: #c1302e;
  border-bottom: 1px solid;
  padding: 7px;
  text-decoration: none;
  position: relative;
  animation-name: blinkcolor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.psanted-kaoades a:hover {
  animation-play-state: paused;
}
.psanted-kaoades a:before {
  content: "\f178";
  font-family: fontawesome;
  position: absolute;
  left: -17%;
  animation-name: moveleft;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.psanted-kaoades a:after {
  content: "\f177";
  font-family: fontawesome;
  position: absolute;
  right: -17%;
  animation-name: moveright;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

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

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

22 Декабря 2018 Загрузок: 2 Просмотров: 1230 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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