This article brings you the content is about how to use pure CSS to implement a paper crane (with source code), there is a certain reference value, a friend in Need can refer to, I hope to help you.
Effect Preview
Source code Download
Https://github.com/comehope/front-end-daily-challenges
Code interpretation
Defines the DOM, which contains 6 elements, each representing the head, neck, body side, wing, tail, and chest:
<div class= "Cranes" > <span class= "Head" ></span> <span class= "Neck" ></span> <span class= "side" ></span> <span class= "Wing" ></span> <span class= "tail" ></span> <span class= "belly" ></span></div>
Center display:
body { margin:0; HEIGHT:100VH; Display:flex; Align-items:center; Justify-content:center; Background-color:dodgerblue;}
Define Container Dimensions:
. cranes { width:52em; Height:50em; FONT-SIZE:7PX;}
Set the paper crane color to White:
. cranes { color:white;}
Draw the head:
. cranes { position:relative;}. Head { border-left:13em solid transparent; Border-right:6em solid transparent; Border-bottom:2em solid; Position:absolute; left:0; top:21; Transform:rotate ( -5deg);}
The code that creates the triangle above is abstracted into a template, and then the data is changed to a variable, similar to what the calling function looks like:
. Cranes span { Border-left:calc (var (--left) * 1em) solid transparent; Border-right:calc (VAR (--right) * 1em) solid transparent; Border-bottom:calc (VAR (--bottom) * 1em) solid; Position:absolute; Transform:rotate (Calc (VAR (--rotation) * 1deg)); Left:calc (VAR (--x) * 1em); Top:calc (VAR (--y) * 1em);}. Head { --left:13; --right:6; --bottom:2; --x:0; --y:21; --rotation:-5;}
Set the transparency so that the element overlays have an origami effect:
. Cranes span { filter:opacity (0.6);}
The next step is to create the other triangles by calling the function that generated the triangles individually:
Neck:
. neck { --left:6; --right:6; --bottom:12; --x:14; --y:19; --rotation:75;}
Body side:
. side { --left:1.5; --right:11.5; --bottom:20; --x:18.8; --y:15.1; --rotation:20;}
Wings:
. wing { --left:18.7; --right:30; --bottom:8; --x:6.7; --y:9.2; --rotation:-41.9;}
Tail:
. tail { --left:18.6; --right:7.7; --bottom:3.9; --x:19.6; --y:38.1; --rotation:-126.5;}
Chest:
. belly { --left:6.2; --right:1.8; --bottom:11.5; --x:17.5; --y:27.8; --rotation:-99;}
At this point, the paper crane finished painting.
Finally, add a bit of interactivity, and when the mouse hovers, the isosceles right triangle change to form the crane:
. cranes:hover span { animation:appear 1s ease-in;} @keyframes appear {from { border-left:3em solid transparent; Border-right:3em solid transparent; Border-bottom:3em solid; Position:absolute; Transform:rotate (0deg); Left:calc ((52EM-3EM)/2); Top:calc ((50EM-3EM)/2);} }
Done!