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

Удивительные эффекты для ссылок на CSS

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

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

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

Как пример: только при наведение интересная анимация происходит:

Оформление для текстовых ссылок на HTML + CSS

Установка:

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

HTML

Код

<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus animation avonus1">
  <span class="envosenua">Ссылка с эффектом #1</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus avonus_text avonus2" data-avonus-text="Ссылка с эффектом #2">
  <span class="envosenua">Ссылка с эффектом #2</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus esigna_spason avonus3">
  <span class="envosenua">Ссылка с эффектом #3</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus esigna_spason avonus4">
  <span class="envosenua">Ссылка с эффектом #4</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus animation avonus5">
  <span class="envosenua">Ссылка с эффектом #5</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus animation avonus6">
  <span class="envosenua">Ссылка с эффектом #6</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus avonus_text avonus7" data-avonus-text="Ссылка с эффектом #7">
  <span class="envosenua">Ссылка с эффектом #7</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus avonus_text avonus8" data-avonus-text="Ссылка с эффектом #8">
  <span class="envosenua">Ссылка с эффектом #8</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus ansukon avonus9">
  <span class="envosenua">Ссылка с эффектом #9</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus ansukon avonus10">
  <span class="envosenua">Ссылка с эффектом #10</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus ansukon avonus11">
  <span class="envosenua">Ссылка с эффектом #11</span>
  </a>
  </div>
</div>
<div class="link_design">
  <div class="asinosag">
  <a href="/" class="avonus ansukon avonus12">
  <span class="envosenua">Ссылка с эффектом #12</span>
  </a>
  </div>
</div>

CSS

Код

.avonus {
  --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
  --uismLinkTextColor: #216a98;
  --uismLinkTextColorHover: #112b52;
  display: var(--uismLinkDisplay);
  color: #185f8c;
  position: relative;
  overflow: hidden;
}

a.avonus{
  text-decoration: none;
}

.envosenua{
  display: block;
}

.animation{
  --uismLinkLineWeight: var(--smLinkLineWeight, 2px);
  --uismLinkLineColor: var(--smLinkLineColor, /00);
  --uismLinkPadding: var(--smLinkPadding, 5px);
  padding: var(--uismLinkPadding);
}

.animation::before,
.animation::after{
  width: 100%;
  height: var(--uismLinkLineWeight);
  left: 0;
}

.animation::before{
  top: 0;
}

.animation::after{
  bottom: 0;
}

.animation .envosenua::before,
.animation .envosenua::after{
  width: var(--uismLinkLineWeight);
  height: 100%;
  top: 0;
}

.animation .envosenua::before{
  left: 0;
}

.animation .envosenua::after{
  right: 0;
}

.animation::before,
.animation::after,
.animation .envosenua::before,
.animation .envosenua::after{
  content: "";
  background-color: var(--uismLinkLineColor);
  position: absolute;
  opacity: 0;

  will-change: transform, opacity;
  transition-property: transform, opacity;
}

.animation:hover::before,
.animation:hover::after,
.animation:hover .envosenua::before,
.animation:hover .envosenua::after{
  opacity: 1;
}

.esigna_spason{
  --uismLinkLineWeight: var(--smLinkLineWeight, 2px);
  --uismLinkLineColor: var(--smLinkLineColor, /00);

  padding-bottom: var(--uismLinkLineWeight);
  position: relative;
}

.esigna_spason::after{
  content: "";
  width: 100%;
  height: var(--uismLinkLineWeight);
  background-color: var(--uismLinkLineColor);
  position: absolute;
  left: 0;
  bottom: 0;
}

.ansukon {
  --uismLinkLineColor: var(--smLinkLineColor, /00);
  --uismLinkTextColorHover: var(--smLinkTextColorHover, #fff);
  --uismLinkPadding: var(--smLinkPadding, 5px);
  padding: var(--uismLinkPadding);
  transition: color .3s ease-out;
}

.ansukon::before,
.ansukon::after{
  content: "";
  background-color: var(--uismLinkLineColor);
  opacity: 0;
  position: absolute;
  transition: transform .2s ease-out, opacity .2s ease-out .03s;
}

.ansukon .envosenua{
  position: relative;
  z-index: 2;
}

.ansukon:hover::before,
.ansukon:hover::after{
  opacity: 1;
  transition-duration: .35s, .35s;
  transition-delay: 0s, 0s;
}

.ansukon:hover{
  color: var(--uismLinkTextColorHover);
}

.avonus_text::before{
  content: attr(data-avonus-text);
  color: var(--uismLinkTextColorHover);
  position: absolute;
}

.avonus_text::before,
.avonus_text .envosenua{
  transition-property: transform;
  transition-timing-function: cubic-bezier(.86, .6, .08, 1.01);
  transition-duration: .3s;
}

.avonus_text:hover::before,
.avonus_text:hover .envosenua{
  transition-duration: .4s;
}

/* Первая 1 */
.avonus1::before{
  transform: translate3d(-105%, 0, 0);
}

.avonus1::after{
  transform: translate3d(105%, 0, 0);
}

.avonus1 .envosenua::before{
  transform: translate3d(0%, -100%, 0);
}

.avonus1 .envosenua::after{
  transform: translate3d(0%, 100%, 0);
}

.avonus1::before,
.avonus1::after,
.avonus1 .envosenua::before,
.avonus1 .envosenua::after{
  transition-timing-function: ease-out;
  transition-duration: .2s, .15s;
  transition-delay: 0s, .15s;
}

.avonus1:hover::before,
.avonus1:hover::after,
.avonus1:hover .envosenua::before,
.avonus1:hover .envosenua::after{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-duration: .25s;
  transition-delay: 0s;
}

/* вторая 2 */

.avonus2::before{
  top: 0;
  transform: rotateY(90deg);
  transition-duration: .2s;
}

.avonus2 .envosenua{
  transform: rotateY(0);
  transition-delay: .25s;
  transition-duration: .25s;
}

.avonus2:hover::before{
  transform: rotateY(0deg);
  transition-delay: .25s;
}

.avonus2:hover .envosenua{
  transform: rotateY(90deg);
  transition-delay: 0s;
  transition-duration: .25s;
}

/* третья 3 */

.avonus3::after{
  transform: translate3d(-100%, 0, 0);
  transition: transform .2s ease-in;
}

.avonus3:hover::after{
  transform: translate3d(0, 0, 0);
}

/* четвертая 4 */
.avonus4::after{
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: transform .3s ease-out, opacity .3s ease-out;
}

.avonus4:hover::after{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* пятая 5 */
.avonus5::before,
.avonus5::after,
.avonus5 .envosenua::before,
.avonus5 .envosenua::after{
  transition-timing-function: ease-out;
  transition-duration: .2s, .15s;
  transition-delay: 0s, .15s;
}

.avonus5::before{
  transform: translate3d(-100%, 0, 0);
}

.avonus5::after{
  transform: translate3d(100%, 0, 0);
}

.avonus5 .envosenua::before{
  transform: translate3d(0, 100%, 0);
}

.avonus5 .envosenua::after{
  transform: translate3d(0, -100%, 0);
}

.avonus5:hover::before,
.avonus5:hover::after,
.avonus5:hover .envosenua::before,
.avonus5:hover .envosenua::after{
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

/* шестая 6 */
.avonus6::before,
.avonus6::after,
.avonus6 .envosenua::before,
.avonus6 .envosenua::after{
  transition-duration: .2s;
  transition-timing-function: ease-out;
}

.avonus6::before,
.avonus6::after{
  width: 100%;
  height: var(--uismLinkLineWeight);
  left: 0;
}

.avonus6 .envosenua::before,
.avonus6 .envosenua::after{
  width: var(--uismLinkLineWeight);
  height: 100%;
  top: 0;
}

.avonus6::before{
  top: 0;
  transform: translate3d(-105%, 0, 0);
}

.avonus6::after{
  bottom: 0;
  transform: translate3d(105%, 0, 0);
}

.avonus6 .envosenua::before{
  left: 0;
  transform: translate3d(0, 105%, 0);
}

.avonus6 .envosenua::after{
  right: 0;
  transform: translate3d(0, -105%, 0);
}

.avonus6:hover::before,
.avonus6:hover::after,
.avonus6:hover .envosenua::before,
.avonus6:hover .envosenua::after{
  transform: translate3d(0, 0, 0);
}

.avonus6:hover::before{
  transition-delay: 0s;
}

.avonus6 .envosenua::after,
.avonus6:hover::after{
  transition-delay: .25s;
}

.avonus6::after,
.avonus6:hover .envosenua::after{
  transition-delay: .15s;
}

.avonus6::before,
.avonus6:hover .envosenua::before{
  transition-delay: .35s;
}

/* седьмая 7 */

.avonus7::before{
  left: 0;
  top: 0;
  transform: translate3d(-110%, 0, 0);
}

.avonus7 .envosenua,
.avonus7:hover::before{
  transform: translate3d(0, 0, 0);
}

.avonus7:hover .envosenua{
  transform: translate3d(110%, 0, 0);
}

/* восьмая 8 */
.avonus8::before{
  left: 0;
  top: 0;
  transform: translate3d(0, 140%, 0);
}

.avonus8 .envosenua,
.avonus8:hover::before{
  transform: translate3d(0, 0, 0);
}

.avonus8:hover .envosenua{
  transform: translate3d(0, -140%, 0);
}

/* девятая 9 */
.avonus9::before,
.avonus9::after{
  width: 50%;
  height: 100%;
  top: 0;
}

.avonus9::before{
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

.avonus9::after{
  right: 0;
  transform: translate3d(100%, 0, 0);
}

.avonus9:hover::before,
.avonus9:hover::after{
  transform: translate3d(0, 0, 0);
}

/* десять 10 */
.avonus10::before,
.avonus10::after{
  width: 100%;
  height: 50%;
  left: 0;
}

.avonus10::before{
  top: 0;
  transform: translate3d(0, -50%, 0);
}

.avonus10::after{
  bottom: 0;
  transform: translate3d(0, 50%, 0);
}

.avonus10:hover::before,
.avonus10:hover::after{
  transform: translate3d(0, 0, 0);
}

/* одинацать 11 */
.avonus11::before,
.avonus11::after{
  width: 51%;
  height: 100%;
  transform: rotate(360deg);
  top: 0;
}

.avonus11::before{
  left: 0;
}

.avonus11::after{
  right: 0;
}

.avonus11:hover::before,
.avonus11:hover::after{
  transform: rotate(0);
}

/* двенацать 12 */
.avonus12::before,
.avonus12::after{
  width: 51%;
  height: 100%;
  top: 0;
}

.avonus12::before{
  left: 0;
  transform: translate3d(-100%, 0, 0) rotate(-45deg);
}

.avonus12::after{
  right: 0;
  transform: translate3d(100%, 0, 0) rotate(-45deg);
}

.avonus12:hover::before,
.avonus12:hover::after{
  transform: translate3d(0, 0, 0);
}

.avonus {
  --smLinkPadding: 10px 15px;
  --smLinkLineWeight: 5px;
  --smLinkLineColor: #1e619c;
  --smLinkTextColor: #1d4ba0;
  --smLinkTextColorHover: #152c50;
}

.ansukon{
  --smLinkTextColorHover: #fff;
}

.link_design{
  display: flex;
  min-height: 300px;
  text-align: center;

  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
}

.link_design:nth-child(2n+2){
  background-color: #f1f4fa;
}

.asinosag{
  margin: auto;
}

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

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

08 Мая 2020 Загрузок: 2 Просмотров: 1073 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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