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

The content of this article is about how to use pure CSS to realize a paper crane (with source code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Effect preview

Source code download

https://github.com/comehope/front-end-daily -challenges

Code Interpretation

Define dom, the container contains 6 elements, representing the head, neck, body side, wings, tail, and chest:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Centered display :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: dodgerblue;
}

Define the container size:

.cranes {
    width: 52em;
    height: 50em;
    font-size: 7px;
}

Set the color of the paper crane 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);
}

Create a triangle with the above The code is abstracted into a template, and then the data is changed into variables, similar to calling a function:

.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 there is an origami effect where the elements are overlaid:

.cranes span {
    filter: opacity(0.6);
}

The next step is one by one Call the function that generates triangles to create other triangles:

Neck:

.neck {
    --left: 6;
    --right: 6;
    --bottom: 12;
    --x: 14;
    --y: 19;
    --rotation: 75;
}

Sides of body:

.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 is finished.
Finally, add a little interactive effect. When the mouse is hovered, it will transform from an isosceles right triangle into a 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);
    }
}

You're done!

Related recommendations:

How to use pure CSS to implement the album icon of the Apple system (code)

How to use CSS and D3 to implement a small Interactive animation of fish swimming (with code)

The above is the detailed content of How to use pure CSS to implement a paper crane (source code attached). For more information, please follow other related articles on the PHP Chinese website!