How to use pure CSS to implement a paper crane (attached source)

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!