How to use pure CSS to realize a paper crane
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!
