Форум

Nik123 · #1 (**permalink**) 20.09.2017, 14:00

Доброго времени суток!
Не может ли кто подсказать как реализовать этот эффект на чистом CSS?

Rasy · #2 (**permalink**) 20.09.2017, 14:16

<!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

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>

Nik123 · #4 (**permalink**) 20.09.2017, 18:02

Спасибо, сейчас попробую на сайте.

Форум

Справочник

Discord чат

Курсы javascript