Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2017, 14:00
Интересующийся
Отправить личное сообщение для Nik123 Посмотреть профиль Найти все сообщения от Nik123
 
Регистрация: 14.08.2017
Сообщений: 12

Радужное переливание ссылки при наведении.
Доброго времени суток!
Не может ли кто подсказать как реализовать этот эффект на чистом CSS?
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2017, 14:16
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 40px;
    }
    .link {
      font-family: Roboto, sans-serif;
      font-size: 18px;
      color: red;
    }

    .link:hover {
      text-decoration: none;
      animation: rainbow 3s infinite;
    }

    @keyframes rainbow {
      0% { color: red; }
      16.6% { color: orange; }
      33.2% { color: yellow; }
      49.8% { color: green; }
      66.4% { color: blue; }
      83% { color: darkblue; }
      100% { color: purple; }
    }
  </style>
</head>
<body>
  <a href="#" class="link">Rainbow</a>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2017, 15:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Nik123,
вариант не для ie
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.rainbow {
    font-size: 24px;
    position: relative;


}
.rainbow:hover:after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px; top: 0px;
  z-index: -44;
  content: "";
  background-color: #333333;
  border-radius: 8px;

}
.rainbow:hover{
  font-weight: bold;
  animation: spin 80s  infinite;
  padding: 4px 8px;
   cursor: default;
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
   color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes spin {

	50% {
	 		background-position: 5000px 0%;
	}
}
  </style>

</head>

<body>

<a class="rainbow">Rainbows are colorful and scalable and lovely</a>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 20.09.2017, 18:02
Интересующийся
Отправить личное сообщение для Nik123 Посмотреть профиль Найти все сообщения от Nik123
 
Регистрация: 14.08.2017
Сообщений: 12

Спасибо, сейчас попробую на сайте.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Блокировка скролла всей страницы при наведении на элемент TimofeyEid jQuery 2 06.09.2015 14:30
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
Div при наведении перекрывает меню tart Общие вопросы Javascript 3 18.11.2014 13:40
Как узнать содержимое ссылки при наведении? if this.href.match()? Kanzaki Events/DOM/Window 10 02.09.2011 23:46
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48