Wie kann ich CSS-Clip-Path-Hintergrund anzeigen und nur Animation in der abgeschnittenen Parion anwenden? ⇐ CSS

[Guest]

Ich habe dieses CSS. Ich habe versucht, es zu machen, damit sich der abgeschnittene Kreisweg in einem Kreis erweitert, aber ich möchte, dass er den Hintergrund nicht maskiert. Ich möchte, dass es den Hintergrund zeigt und auch den abgeschnittenen Kreis zeigt. Es sollte sowohl den Hintergrund als auch den abgeschnittenen Teil anzeigen. Hat die Schmelzanimation draußen es gibt keine Animation.

Code: Select all

@keyframes expandCircle {
0% {clip-path: circle(0% at center);}
100% {clip-path: circle(100% at center);}}

@keyframes melt {
0% {
filter: blur(20px) contrast(400%) saturate(250%) brightness(125%);
pointer-events: none;}
100% {
filter: none;
pointer-events: all;}}

#screen-container {
position: absolute;
width: 100%;
height: 100%;
background-image: url("system/wallpaper/paint.bmp");
background-repeat: no-repeat;
background-size: cover;
background-color: #000000;
animation: expandCircle 3s forwards;
clip-path: inset(0 0 0 0 round 8px); /* contain the blur */
overflow: hidden;
}

#screen-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
clip-path: circle(0% at center);
animation: melt 2s forwards;
}