• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Необычные эффекты CSS при наведении ссылки (Оригинальные трюки при наведении ссылки на эти особые момент)
Необычные эффекты CSS при наведении ссылки
Kosten
Дата: Понедельник, 2019-11-25, 23:54 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25282
Награды: 58


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

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



HTML

Код
  <h2>Классический</h2>
  <a class="link pekodun-pevasod">Переход</a>
  <a class="link pekodun-pevasod">Переход 2</a>
  <a class="link pekodun-pevasod">Переход 3</a>
  <a class="link pekodun-pevasod">Переход 4</a>
  <a class="link pekodun-pevasod">Переход 5</a>
  <h2>Классический бутерброд</h2>
  <a class="link pekodun-pevasodsub">ZorNet.Ru — 1</a>
  <a class="link pekodun-pevasodsub">ZorNet.Ru — 2</a>
  <a class="link pekodun-pevasodsub">ZorNet.Ru — 3</a>
  <a class="link pekodun-pevasodsub">ZorNet.Ru — 4</a>
  <a class="link pekodun-pevasodsub">Los ZorNet.Ru — 5</a>
  <h2>Слева направо</h2>
  <a class="link anim-lefttoright">Клик-1</a>
  <a class="link anim-lefttoright">Клик-2</a>
  <a class="link anim-lefttoright">Клик-3 </a>
  <a class="link anim-lefttoright">Клик-4 </a>
  <a class="link anim-lefttoright">Клик-5</a>
  <h2>Справа налево</h2>
  <a class="link anim-righttoleft">эффекты1</a>
  <a class="link anim-righttoleft">эффекты2</a>
  <a class="link anim-righttoleft">эффекты3</a>
  <a class="link anim-righttoleft">эффекты4</a>
  <a class="link anim-righttoleft">эффекты5</a>
  <h2>Середина</h2>
  <a class="link anim-middleout">Tatvan</a>
  <a class="link anim-middleout">Izmir</a>
  <a class="link anim-middleout">Istanbul</a>
  <a class="link anim-middleout">Hakkari</a>
  <a class="link anim-middleout">Los Angeles</a>
  <h2>Бесконечность</h2>
  <a class="link anim-test" data-hover="Tatvan">Первый</a>
  <a class="link anim-test" data-hover="Izmir">Второй</a>
  <a class="link anim-test" data-hover="Istanbul">Третий</a>
  <a class="link anim-test" data-hover="Hakkari">Четвертый</a>
  <a class="link anim-test" data-hover="Los Angeles">Пятый</a>  
  <h2>Рейс</h2>
  <a class="link anim-destination"><span data-hover="Tatvan">Красивый</span></a>
  <a class="link anim-destination"><span data-hover="Izmir">Стильный</span></a>
  <a class="link anim-destination"><span data-hover="Istanbul">Оригинальный</span></a>
  <a class="link anim-destination"><span data-hover="Hakkari">Цветной</span></a>
  <a class="link anim-destination"><span data-hover="Los Angeles">Яткий</span></a>
  <h2>Я здесь</h2>
  <a class="link anim-iamhere">Я здесь 1</a>
  <a class="link anim-iamhere">Я здесь 2</a>
  <a class="link anim-iamhere">Я здесь 3</a>
  <a class="link anim-iamhere">Я здесь 4</a>
  <a class="link anim-iamhere">Я здесь 5</a>
  <h2>Необычный бутерброд</h2>
  <a class="link anim-fancysub">Оригинал</a>
  <a class="link anim-fancysub">Блеск</a>
  <a class="link anim-fancysub">Универсал</a>
  <a class="link anim-fancysub">Хром</a>
  <a class="link anim-fancysub">Переход</a>
  <h2>Необычный ключ</h2>
  <a class="link anim-fancywrench">Татван</a>
  <br>
  <a class="link anim-fancywrench">Измир</a>
  <br>
  <a class="link anim-fancywrench">Стамбул</a>
  <br>
  <a class="link anim-fancywrench">Hakkari</a>
  <br>
  <a class="link anim-fancywrench">Лос-Анджелес</a>

CSS

Код
h2 {
  font-size: 2.5em;
}

div.row-fluid {
  text-align: center;
  margin-top: 4em;
}

div.row-fluid a {
    margin-left: 0.3em;
    margin-bottom: 0.6em;
}

.link {
  font-size: 2em;
  font-weight: 300;
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin-bottom: 0.5em;
}

.link.anim-destination {
    display: inline-block;
    overflow: hidden;
    padding-right: 0.5em;
    font-size: 2em;
}

.link.anim-destination span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.link.anim-destination span::before {
    position: absolute;
    white-space: nowrap;    
    top: 100%;
    content: attr(data-hover);
    font-weight: 500;
}

.link.anim-destination:hover span,
.link.anim-destination:focus span {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.link.anim-test {
  font-weight: 400;
  color: #ddd;
}

.link.anim-test:after {
  position: absolute;
  content: attr(data-hover);    
  color: black;
  top: 0em;
  display: block;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.link.anim-test:hover:after {
  opacity: 0;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.link.anim-iamhere {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.link.anim-iamhere:hover {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: blue;
}

.link.pekodun-pevasod {
  border-bottom: 3px solid transparent;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.link.pekodun-pevasod:hover {
  border-bottom: 3px solid blue;
}

.link.pekodun-pevasodsub {
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.link.pekodun-pevasodsub:hover {
  border-top: 3px solid blue;
  border-bottom: 3px solid blue;
}

.link.anim-fancysub:after {
  content: '';
  position: absolute;
  top: -0.6em;
  display: block;
  width: 100%;
  height: 2em;
  border-top: 0.1em solid transparent;
  border-bottom: 0.1em solid transparent;
  background: transparent;
  transition: all .5s ease;
}

.link.anim-fancysub:hover:after {
  border-top: 0.1em solid blue;
  border-bottom: 0.1em solid blue;
  top: -0.1em;
  height: 1.2em;
}

.link.anim-fancywrench:after {
  content: '';
  position: absolute;
  top: 0em;
  left: -33%;
  display: block;
  width: 150%;
  height: 1em;
  border-right: 0.1em solid transparent;
  border-left: 0.1em solid transparent;
  background: transparent;
  transition: all .5s ease;
}

.link.anim-fancywrench:hover:after {
  border-right: 0.1em solid blue;
  border-left: 0.1em solid blue;
  left: -4%;
  width: 104%;
}

.link.anim-lefttoright:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: blue;
  transition: all .5s ease;
}

.link.anim-lefttoright:hover:after {
  width: 100%;
}

.link.anim-righttoleft:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  width: 0;
  height: 3px;
  background: blue;
  transition: all .5s ease;
}

.link.anim-righttoleft:hover:after {
  width: 100%;
}

.link.anim-middleout:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: blue;
  margin: auto;
  transition: all .5s ease;
}

.link.anim-middleout:hover:after {
  width: 100%;
}

Многие другие разработчики - также придаю большое значение анимации для Hover, поэтому все следующие кнопки также дают прекрасную анимацию.

Демонстрация
Прикрепления: 8321945.png(39.4 Kb) · link-hover-effe.zip(4.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Необычные эффекты CSS при наведении ссылки (Оригинальные трюки при наведении ссылки на эти особые момент)
  • Страница 1 из 1
  • 1
Поиск: