a active и opacity animacion
Нажимая на любую ссылку необходимо плавно сделать прозрачным весь контент.
В моем случае исчезает только нажатая ссылка, что я делаю не так?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
a:active {
-webkit-animation: fade-out 1s linear;
/* Safari 4+ */
-moz-animation: fade-out 1s linear;
/* Fx 5+ */
-o-animation: fade-out 1s linear;
/* Opera 12+ */
animation: fade-out 1s linear;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@-moz-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@-o-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
</style>
<a href="">test</a>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
|
dima85, ты хоть бы хтмл свой показал... А еще лучше сделать полный тестовый пример. ;)
|
Показал. Только не понимаю как вам это поможет :)
Проблема скорее всего в этой строчке: a:active { |
dima85,
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
a:active + h1, a:active + h1 + p{
-webkit-animation: fade-out 1s forwards;
/* Safari 4+ */
-moz-animation: fade-out 1s forwards;
/* Fx 5+ */
-o-animation: fade-out 1s forwards;
/* Opera 12+ */
animation: fade-out 1s forwards;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@-moz-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@-o-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
</style>
<a href="">test</a>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
|
Понял структуру, но это не совсем подходит. Т.к. страница достаточно большая и html теги есть с верху ссылки. Может как-то можно через js сделать плавное затемнение именно всего сайта всего что в body
|
:-?
|
|
| Часовой пояс GMT +3, время: 19:49. |