How to use pure CSS to realize the effect of butterfly specimen's display frame

This article brings you the content is about how to use the pure CSS to achieve the butterfly specimen display box effect, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Source code Download

The full source code of the daily Front end Combat series is available from GitHub:

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

Defines the DOM, the container represents the whole butterfly, because the butterfly is symmetrical, so it is divided into left and right sides, each side has 3 sub-elements:

<div class= "Butterfly" >    <div class= "left" >        <span></span>        <span></ span>        <span></span>    </div>    <div class= "right" >        <span></span >        <span></span>        <span></span>    </div></div>

Center 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;}

Use the 1th sub-element to draw the upper part of the wing:

. Butterfly span {    position:absolute;    border-radius:50%;}. Butterfly Span:nth-child (1) {    width:5em;    Height:7em;    Background-color:gold;}

Use the 2nd sub-element to draw the lower half of the wing:

. Butterfly Span:nth-child (2) {    width:5.5em;    height:3.5em;    background-color:orangered;    top:5em;    Left: -2.5em;    Filter:opacity (0.6);}

Use the 3rd sub-element to draw the tentacles:

. Butterfly Span:nth-child (3) {    width:6em;    Height:6em;    Border-right:0.3em solid orangered;    Top: -0.5em;}

Copy the left half to the right half:

. Butterfly. Right {    position:absolute;    Width:inherit;    Height:inherit;}. Butterfly. Right {    Transform:rotatey (180deg) rotate ( -90deg);    Top:0.4em;    Left:0.4em;}

Put the specimen in the 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.2em inset silver;}. Butterfly::after {    content: ';    Position:absolute;    Box-sizing:border-box;    Width:40em;    Height:30em;    Background-color:lightyellow;    Top: -9em;    Left: -16em;    Border:2em solid Burlywood;    Border-radius:3em;    Box-shadow:         0 0.3em 2em 0.4em rgba (0, 0, 0, 0.3),        inset 0.4em 0.4em 0.1em 0.5em rgba (0, 0, 0,. 4);    Z-index:-1;}

Finally, adjust the displacement caused by the pattern tilt:

. Butterfly {    Transform:translatex (1em);}

Done!