Показать сообщение отдельно
  #6 (permalink)  
Старый 19.03.2018, 08:59
Аватар для Esm1nec
Новичок на форуме
Отправить личное сообщение для Esm1nec Посмотреть профиль Найти все сообщения от Esm1nec
 
Регистрация: 18.03.2018
Сообщений: 8

Сообщение от рони Посмотреть сообщение
идея 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>
Спасибо, интересный вариант! Попробую его применить и посмотреть, как выглядеть будет А если все же через JS события onmouse?
Ответить с цитированием