Форум

dima85 · #1 (**permalink**) 07.05.2019, 11:38

Нажимая на любую ссылку необходимо плавно сделать прозрачным весь контент.
В моем случае исчезает только нажатая ссылка, что я делаю не так?

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

ksa · #2 (**permalink**) 07.05.2019, 12:33

dima85, ты хоть бы хтмл свой показал... А еще лучше сделать полный тестовый пример.

dima85 · #3 (**permalink**) 07.05.2019, 12:41

Показал. Только не понимаю как вам это поможет

Проблема скорее всего в этой строчке: a:active {

рони · #4 (**permalink**) 07.05.2019, 13:36

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>

dima85 · #5 (**permalink**) 07.05.2019, 13:56

Понял структуру, но это не совсем подходит. Т.к. страница достаточно большая и html теги есть с верху ссылки. Может как-то можно через js сделать плавное затемнение именно всего сайта всего что в body

рони · #6 (**permalink**) 07.05.2019, 14:16

рони · #7 (**permalink**) 07.05.2019, 14:28

dima85,
эффект затемнения всей страницы кроме выбранного элемента DOM

Форум

Справочник

Discord чат

Курсы javascript