How to use pure CSS to realize the display box effect of butterfly specimen
This article mainly shows you "how to use pure CSS to achieve the butterfly specimen display box effect", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure CSS to achieve the butterfly specimen display box effect" this article.
Code interpretation
Define dom, and the container represents the whole butterfly. Because the butterfly is symmetrical, it is divided into left and right sides, each side has three child elements:
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background:linear-gradient (gray,lightyellow,gray)
}
Define the size of the butterfly:
.butterfly {
Position:relative
Width:10em
Height:10em
}
Draw the left half first:
.butterfly.left {
Position:absolute
Width:inherit
Height:inherit
}
Draw the upper part of the wing with the first child element:
.butterflyspan {
Position:absolute
Border-radius:50%
}
.butterflyspan:nth-child (1) {
Width:5em
Height:7em
Background-color:gold
}
Draw the lower half of the wing with the second child element:
.butterflyspan:nth-child (2) {
Width:5.5em
Height:3.5em
Background-color:orangered
Top:5em
Left:-2.5em
Filter:opacity (0.6)
}
Draw the antennae with the third child element:
.butterflyspan:nth-child (3) {
Width:6em
Height:6em
Border-right:0.3emsolidorangered
Top:-0.5em
}
Make a copy of the left side to the right side:
.butterfly.right {
Position:absolute
Width:inherit
Height:inherit
}
.butterfly.right {
Transform:rotateY (180deg) rotate (- 90deg)
Top:0.4em
Left:0.4em
}
To put a specimen in a display box:
.butterfly:: before {
Content:''
Position:absolute
Box-sizing:border-box
Top:-2.5em
Left:-8em
Width:24em
Height:18em
Background-color:black
Border:0.2eminsetsilver
}
.butterfly:: after {
Content:''
Position:absolute
Box-sizing:border-box
Width:40em
Height:30em
Background-color:lightyellow
Top:-9em
Left:-16em
Border:2emsolidburlywood
Border-radius:3em
Box-shadow:
00.3em2em0.4emrgba (0pd0re0re0pl 0.3)
Inset0.4em0.4em0.1em0.5emrgba (0penny 0penny .4)
Z-index:-1
}
Finally, adjust the displacement caused by the tilt of the pattern:
.butterfly {
Transform:translateX (1em)
}
The above is all the contents of the article "how to use pure CSS to achieve the display box effect of butterfly specimens". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
