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

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.