» »

Анимированные стрелки с помощью 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 версию на анимированную стрелку, что находится вокруг ключевого словосочетания.

Демонстрация
2018-12-22 Загрузок: 1 Просмотров: 238 Комментарий: (0)

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

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

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