Сообщение от рони
|
Esm1nec,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background:#000;
}
ul{
list-style:none;
font-size:50px;
display:flex;
justify-content: center;
}
ul a{
text-decoration:none;
color:#FFF;
}
ul li{
margin:20px;
}
.isTextAnimated span{
transition: .6s;
color:#666;
animation:trololo 2.4s linear infinite;
}
.isTextAnimated:hover span{
animation:none;
color:#FFF;
}
@keyframes trololo{
30%,70%{
color:#666;
}
50%{
color:#FFF;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var e = $("#shining-text");
var text = e.text();
e.html("");
for (var i = 0; i < text.length; i++) {
var span = $("<span></span>", {style:"animation-delay :" + i * 100 + "ms;"}).text(text.charAt(i));
e.append(span);
}
e.addClass("isTextAnimated");
});
</script>
</head>
<body>
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul class="uk-navbar-nav uk-hidden-small">
<li class='uk-active' itemprop="name"><a href="/" itemprop="url">Главная</a></li>
<li itemprop="name"><a href="/avtopark.php" itemprop="url" id="shining-text">Автопарк</a></li>
...
</ul>
</nav>
</body>
</html>
|
ОГРОМНОЕ спасибо за помощь!!! Действительно этот вариант намного проще
Пришлось его прикручивать через костыли, ибо куча разных конфликтующих скриптов.
