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

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!

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.