body {
background: #000;
}
.page {
background: #fff;
height: 100vh;
overflow: auto;
clip-path: circle(100%);
}
.page.closed {
animation: closing 1.8s ease forwards;
}
@keyframes closing {
0% {clip-path: circle(100%);}
65% {clip-path: circle(10%);}
85% {clip-path: circle(10%);}
100% {clip-path: circle(0%);}
}
Requirements :
Having an element that wraps the whole page, with a set size of the height of window, combined with the `overflow: auto` property.
Then, when you want to plunge the page into the dark, add the `closed` class to the page.
Having an element that wraps the whole page, with a set size of the height of window, combined with the `overflow: auto` property.
Then, when you want to plunge the page into the dark, add the `closed` class to the page.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.