That's all Folks!

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.

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.