Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Demo: home page for free source code

​

Code directory:

​

Main code implementation:

Partial CSS styles:

html { height: 100%; overflow: hidden; } body { min-height: 100%; } .container { cursor: pointer; background-position: center center; background-size: cover; background-image: url(".. /img/1.jpg"); width: 100vw; height: 100vh; position: relative; } .container:focus { display: none; } .flap { width: 150vmax; height: 150vmax; position: absolute; bottom: 50%; right: 50%; pointer-events: none; will-change: transform; background: hsl(calc(1turn * var(--p)), 80%, 80%); background: linear-gradient(35deg, #555, black); border: solid 4px #999; --p: calc(var(--i) / var(--flaps)); -webkit-animation: click 0.9s Cubic bezier(0.5, 0, 0.5, 1) 0.1s; Animation: click 0.9s Cubic bezier(0.5, 0, 0.5, 1) 0.1s; transform-origin: bottom right; Transform: rotate(-0.5turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(-100%) translateY(90%); } @-webkit-keyframes click { 48%, 52% { transform: Rotate (-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%); rotate(-0.25turn) rotate(calc(1turn * var(--p))) translateX(0%) translateY(0%); } } @keyframes click { 48%, 52% { transform: Rotate (-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%); rotate(-0.25turn) rotate(calc(1turn * var(--p))) translateX(0%) translateY(0%); } } .photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; box-shadow: 0 10px 40px #000; margin: -1rem; margin-bottom: -5rem; border: solid 1rem #fff; border-bottom-width: 5rem; -webkit-animation: photo 5s cubic- Bezier (0.5, 0, 0.5, 1) 0.9s both; Animation: photo 5s Cubic bezier(0.5, 0, 0.5, 1) 0.9s both; } @-webkit-keyframes photo { 30%, 60%, 70% { filter: sepia(30%) saturate(140%) contrast(120%); Rotate the transform: scale (0.5) (4 deg); } 61% { opacity: 1; } 71% { opacity: 0; transform: none; } 100% { filter: none; opacity: 1; } } @keyframes photo { 30%, 60%, 70% { filter: sepia(30%) saturate(140%) contrast(120%); Rotate the transform: scale (0.5) (4 deg); } 61% { opacity: 1; } 71% { opacity: 0; transform: none; } 100% { filter: none; opacity: 1; } } .instructions { position: absolute; top: 0; right: 0; left: 0; padding: 1rem; font-family: monospace; text-transform: uppercase; text-shadow: 0 1px 8px #fff; }Copy the code

HTML code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS only Camera Shutter</title> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container" tabIndex="0"> <div class="photo" style="background-image:url('img/2.jpg');" </div> <div class="shutter" style=" flaps: 6"> <div class="flap" style=" I: 0"></div> <div class="flap" style="--i: 1"></div> <div class="flap" style="--i: 2"></div> <div class="flap" style="--i: 3"></div> <div class="flap" style="--i: 4"></div> <div class="flap" style="--i: 5"></div> </div> </div> </body> </html>Copy the code

Works from the network collection, infringement stand delete

You need to introduce the CSS style in the screenshot and choose your favorite image

The source code for

Check the main page of the blogger reply code 007 to obtain

Clocked articles updated 67/100 days

You can like, collect, pay attention to, comment on me, need to complete the document at any time contact me or exchange yo ~!

​

​