Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use pure CSS to achieve a paper crane, the article is very detailed, has a certain reference value, interested friends must read it!

Code interpretation

Define dom. The container contains 6 elements, representing head, neck, side of body, wing, tail and chest:

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:13emsolidtransparent

Border-right:6emsolidtransparent

Border-bottom:2emsolid

Position:absolute

Left:0

Top:21

Transform:rotate (- 5deg)

}

Abstract the above code to create the triangle into a template, and then the data are changed into variables, similar to the way a function is called:

.cranesspan {

Border-left:calc (var (--left) * 1em) solidtransparent

Border-right:calc (var (--right) * 1em) solidtransparent

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

-- xpur0

-- YRO 21

-- rotation:-5

}

Set the transparency so that there is an origami effect at the element overlay:

.cranesspan {

Filter:opacity (0.6)

}

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

Neck:

.neck {

-- left:6

-- right:6

-- bottom:12

-- XRO 14

-- YRO 19

-- rotation:75

}

Side of the body:

.side {

-- left:1.5

-- right:11.5

-- bottom:20

-- xPlus 18.8

-- yRO 15.1

-- rotation:20

}

Wings:

.wing {

-- left:18.7

-- right:30

-- bottom:8

-- xPlus 6.7

-- yRO 9.2

-- rotation:-41.9

}

Tail:

.tail {

-- left:18.6

-- right:7.7

-- bottom:3.9

-- xPlus 19.6

-- ypur38.1

-- rotation:-126.5

}

Chest:

.belly {

-- left:6.2

-- right:1.8

-- bottom:11.5

-- XRO 17.5

-- YRV 27.8

-- rotation:-99

}

At this point, the paper crane is finished.

Finally, add a little interactive effect. When the mouse hovers, it changes from an isosceles right triangle to a crane:

.cranes: hoverspan {

Animation:appear1sease-in

}

@ keyframesappear {

From {

Border-left:3emsolidtransparent

Border-right:3emsolidtransparent

Border-bottom:3emsolid

Position:absolute

Transform:rotate (0deg)

Left:calc ((52em-3em) / 2)

Top:calc ((50em-3em) / 2)

}

}

The above is all the contents of the article "how to realize a Paper Crane with Pure CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.