fix: smooth balada nebula color transition via ::after opacity
This commit is contained in:
parent
d422cea905
commit
36220dc34f
1 changed files with 12 additions and 4 deletions
|
|
@ -31,8 +31,16 @@ html, body {
|
|||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
animation: nebulaFloat ease-in-out infinite;
|
||||
transition: background 3.5s ease;
|
||||
}
|
||||
.nebula::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 9s ease;
|
||||
}
|
||||
body.balada .nebula::after { opacity: 1; }
|
||||
.nebula-a {
|
||||
width: 500px; height: 350px;
|
||||
background: radial-gradient(ellipse, rgba(120,0,220,0.18), transparent 70%);
|
||||
|
|
@ -991,9 +999,9 @@ body.balada .spotlight-wrap { opacity: 1; }
|
|||
/* ============================================================
|
||||
BALADA — SOBRESCRITAS DO AMBIENTE
|
||||
============================================================ */
|
||||
body.balada .nebula-a { background: radial-gradient(ellipse, rgba(255,0,100,0.22), transparent 70%); }
|
||||
body.balada .nebula-b { background: radial-gradient(ellipse, rgba(180,0,255,0.18), transparent 70%); }
|
||||
body.balada .nebula-c { background: radial-gradient(ellipse, rgba(255,140,0,0.14), transparent 70%); }
|
||||
.nebula-a::after { background: radial-gradient(ellipse, rgba(255,0,100,0.22), transparent 70%); }
|
||||
.nebula-b::after { background: radial-gradient(ellipse, rgba(180,0,255,0.18), transparent 70%); }
|
||||
.nebula-c::after { background: radial-gradient(ellipse, rgba(255,140,0,0.14), transparent 70%); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue