“This is the fourth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
CSS special effects – Halloween skeletons
For the Halloween just past, I believe we all spent a very happy. Halloween originated in the Western world. It is usually celebrated at night and people dress up in various costumes. This year’s Halloween weekend, happy Valley activity atmosphere is very strong. Let’s update a wave of Halloween ghost CSS effects along with the small tail of the holiday today.
1. Define the framework
First define the main container again, color the background, set the container to the appropriate size, and center the container. The following code
<body>
<div></div>
</body>
body {
position: relative;
background-color: #1e013e;
width: 100%;
}
div {
position: absolute;
left: 50%;
width: 20em;
height: 30em;
margin-left: -10em;
top: 50%;
margin-top: -15em;
}
Copy the code2. Draw the main part
2.1 The Door behind the Ghost
Use box-shadow and border Settings to get the shape of the door.
border-radius: 10em 10em 0 0; box-shadow: Inset 000 2em #2e004f,// inset 000 4em #10001c,// inset 0-16.5 em 00 #10001c,// skeleton background inset 4.5em 1em.4em Rgba (0,0,0,0.5),// background left shadow 1 inset 5.5em 1em.7em rgba(0,0,0,0.2),// background left shadow 2 inset -4.5em 1em.4em rgba(0,0,0,0.5),// background right shadow 1 Inset-5.5em 1em.7em rgba(0,0,0,0.2); // Shadow 2 on the right side of backgroundCopy the codeThe effect is shown below
2.2 Drawing skeleton background
The pattern is set by background
background-repeat: no-repeat; background-image: // 1 linear gradient(45deg,rgba(255,255,255,0) 30%,# CCC 35%,# CCC 37%,rgba(255,255,255,0) 42%), // 2 linear gradient(-45deg,rgba(255,255,255,0) 30%,# CCC 35%,# CCC 37%,rgba(255,255,255,0) 42%), // 3 linear gradient(45deg,rgba(255,255,255,0) 30%,# DDD 35%,# DDD 37%,rgba(12, 4, 4, 0) 42% / / skull linear grain on the left of the gradient (140 deg, rgba (0,0,0,0) 40%, rgba (0,0,0,0.2) 47%, rgba (0,0,0,0.2) 52%, rgba (0,0,0,0) 58%). / / skull on the right lines linear - gradient (- 140 deg, rgba (0,0,0,0) 40%, rgba (0,0,0,0.2) 47%, rgba (0,0,0,0.2) 52%, rgba (0,0,0,0) 58%). // Skeleton-nose radial-gradient(Ellipse at 50% 100%, Black 50%, RGBA (0,0,0) 52%), // Skeleton-nose linear-gradient(white,white); Background-size: 2em 2em,2em 1em,2em 1em,5em 5em,5em 5em,1.5em 2.5em,80% 90%; Background: 50% 12%,48% 18.5%,52% 22%, 2EM 7em, Right 2EM top 7em,50% 42%,50% 50%;Copy the codeThe effect is shown in figure
2.3 Drawing skeleton details
The pseudo class is first set to the appropriate size, and then positioned in the center of the main frame. Through background Settings, complete skeleton details processing
div:after { width:36em; height: 35em; left: -8em; top: -8em; background-repeat: no-repeat; background-image: // skull radial-gradient(circle,#7fff00 20%,rgba(127,255,0,0) 80%), // skull right eye color radial-gradient(circle,#7fff00 20%,rgba(127,255,0,0) 80%), // skull tooth horizontal linear-gradient(black,black), Repeating-linear-gradient (to right,black,black.3em,rgba(0,0,0,0).3em,rgba(0,0,0) 1em), Linear gradient(to right,rgba(0,0,0,0.3),rgba(0,0,0,0) 20%), Linear-gradient (to left,rgba(0,0,0,0.3),rgba(0,0,0,0) 20%), Linear-gradient (to Right, rgba (255255255,0.3), rgba (255255255,0.1), rgba (255255255,0.1), rgba (255255255,0.3)), // linear gradient(to bottom,#10001c,rgba(0,0,0,0)), // ellipse at 50% 0,rgba(218,165,32,0) 50%,#daa520 51%,#daa520 53%,rgba(218,165,32,0) 54%, // Linear-gradient (#daa520,#daa520), // 1 linear gradient(80deg,#483d8b,#6a5acd 45%,rgba(106,90,205,0) 46%), // 2 linear gradient(10deg,rgba(106,90,205,0) 35%,#483d8b 36%,#6a5acd 55%,rgba(106,90,205,0) 56%), // 3 linear gradient(160deg,rgba(106,90,205,0) 25%,#6a5acd 26%,#483d8b 32%,rgba(106,90,205,0) 33%), // 1 linear gradient(105deg,rgba(106,90,205,0) 60%,#6a5acd 61%,#483d8b), // 5 linear gradient(160deg,rgba(106,90,205,0) 25%,#6a5acd 26%,#483d8b 35%,rgba(106,90,205,0) 36%), // 5 linear gradient(120deg,rgba(106,90,205,0) 70%,#6a5acd 71%,#483d8b), // 1 linear gradient(20deg,rgba(106,90,205,0) 55%,#483d8b 56%,#6a5acd 65%,rgba(106,90,205,0) 66%), // The skull left corner 8 Linear-gradient (70deg,# 483D8b,# 6a5ACd 30%, Rgba (106,90,205,0) 31%), // 1 Linear gradient(-80deg,# 483D8b,# 6a5ACd 45%,rgba(106,90,205,0) 46%), // 2 linear gradient(-10deg,rgba(106,90,205,0) 35%,#483d8b 36%,#6a5acd 55%,rgba(106,90,205,0) 56%), // 3 linear gradient(-160deg,rgba(106,90,205,0) 25%,#6a5acd 26%,#483d8b 32%,rgba(106,90,205,0) 33%), // 4 linear gradient(-105deg,rgba(106,90,205,0) 60%,#6a5acd 61%,#483d8b), // 5 linear gradient(-160deg,rgba(106,90,205,0) 25%,#6a5acd 26%,#483d8b 35%,rgba(106,90,205,0) 36%), // 5 linear gradient(-120deg,rgba(106,90,205,0) 70%,#6a5acd 71%,#483d8b), // 3 linear gradient(-20deg,rgba(106,90,205,0) 55%,#483d8b 56%,#6a5acd 65%,rgba(106,90,205,0) 66%), // the skull right corner 8 linear-gradient(-70deg,#483d8b,#6a5acd 30%,rgba(106,90,205,0) 31%); background-size: 2EM 2EM, 2EM 2em,5em.3em,5.3 EM 1.5em, 7EM 3.5em, 7EM 3.5em, 7EM 3.5em, 10EM 3.5em, 8EM 5em, 8EM 7em,1em.2em,.2em 2em, 2EM 10em,10em 3em,10em 3em,2em 5em,7em 2em,2em 3em,6em 2em,2em 3em,2em 10em,10em 3em,10em 3em,2em 5em,7em 2em,2em 3em,6em 2em,2em 3em; background-position: Left 14.6 EM bottom 15.2em,right 14.6 EM bottom 15.2em,left 50% bottom 11.3 EM,left 50% bottom 10.7 EM,left 50% bottom 10em,left 50% bottom 10em,left 50% bottom 10em,left 50% bottom 10em,left 50% bottom 4em,left 50% bottom 1em,left 50% Bottom 1.9em,left 50% bottom 1em,5em 4em,5em 13em,5em 6em,9em 1em,5em 10em,7.4em 7em,0 11em,1em 8em,right 5em top 4EM,right 5EM top 13EM,right 5EM top 6EM,right 9EM top 1EM,right 5EM top 10EM,right 7.4 EM top 7EM,right 0 top 11EM,right 1em top 8em; }Copy the codeThe result is as follows
2.4 Add eye details
The eye area is set to a curved black square with shadows using pseudo classes.
Div: before {width: 3.4 em. height: 3em; Left: 5.9 em. Top: 9.2 em. background-color: black; Border - the radius: 1.3 em. Box-shadow:.2em.2em 0.1em #aaa,4.8em 0 0 black, 5em.2em 0.1em #aaa; }Copy the codeSo, the Halloween skeleton is done.