|
Сообщение от Esm1nec
|
|
Выглядит так: сама ссылка серая, по ней для привлечения внимания бегает блик. При наведении на ссылку, блик должен перестать бегать, а сама ссылка загореться белым (hover).
|
идея
devote
https://javascript.ru/forum/project/...tml#post375476
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<style>
.bar {
line-height: 1.6em;
position: relative;
display: inline-block;
background-color: transparent;
overflow: hidden;
box-sizing: border-box;
margin: 4px 6px;
padding: 4px;
}
.bar:before {
content: ' ';
display: block;
position: absolute;
width: 280%;
height: 100%;
animation: trololo 2s linear infinite;
background-image: linear-gradient(90deg, #A9A9A9 15%, white 50%, #A9A9A9 85%);
z-index: -10;
background-repeat: repeat;
}
.bar:hover:before {
background-image: none;
animation-play-state: paused;
}
@keyframes trololo {
from {
left: -150%;
}
to {
left: -5%;
}
}
</style>
<a href="" id="shining-text" class="bar">shining-text</a>
</body>
</html>