Man-of-war implementation steps-CodePudding

1. Create the project structure
Set the body: (bronze)

/* 1. Set the background color */
Body {
Height: 100 vh;/* the vh: 1 the vh is equal to 1% of the viewport height */
margin: 0;/* no distance outside */
display: flex;/* */body content for the elastic inside the box model
align-items: center;/* cross shaft center */
justify-content: center; Spindle center/* */
Background: linear - gradient (to bottom, cyan, # 0041 c2, # 180029);/* the background color gradient */
}
/* HTML code: */
<body>

Effect:

The jellyfish body: (silver)
All the jellyfish body containers

. Body main body parts (head (semicircle))
/* body whole set, become a container */
The jellyfish {
position: relative;/* use relative positioning */
}
/* create a body part */
. Jellyfish. Body {
Background: cyan;/* the color of the body */
/* Google browser default font size of 16 px; */
width: 10em;/* 10 times more pixels */
Height: 5 em;/* 5 times of pixel values */
position: relative;
Opacity: 0.65;/* opacity: the element of the opacity */
/*
Set the shadow effect
H is chroma, value between 0 ~ 360 degrees, zero is red, 120 degrees is green, 240 degrees is blue, 360 degrees is also red,
S is the saturation, the color of purity, is a percentage value, value was 0% ~ 100%, the lowest 0% saturation, 100% saturation highest
L is brightness, is also a percentage value, value in 0% ~ 100%, and 0% in the most dark, 100% of the light,
A is the opacity value in 0.0 ~ 1.0, 0.0 completely transparent, 1.0 completely opaque,
*/
Box - shadow: 0.2 em an inset 0 0 cyan, an inset 0.4 em 0 0 em hsla (0, 0%, 100%, 0.6);
/* border - the top - left - the radius attribute defines the shape of the upper left frame */
Border - the top - left - the radius: 50% 100%.
/* border - top - right - the radius attribute defines the shape of the upper right corner of the frame */
Border - top - right - the radius: 50% 100%.
}

/* HTML code: */
<body>

Effect:

The bottom of the body. The base: wave part (gold)
/* wave at the bottom of the part */
. Jellyfish. Body. The base {
position: absolute;
Width: 3 em;
Height: 1.5 em.
Background: cyan;
/* at the bottom of the distance from the negative to overflow */
Bottom: 1.5 em.
/* */
the lower leftBorder - bottom - left - the radius: 50% 100%.
The bottom right hand corner *//*
Border - bottom - right - the radius: 50% 100%.
Two shadow out *//* copy
Box - shadow: 3.5 em 0 0 cyan, 7 em 0 0 cyan;
}
/* HTML code: */
<body>

Effect:

Rendering wave connection parts: using pseudo elements (. Base: after that, the base: before) (gold)
/* : after pseudo element after the element to add content, */
. Jellyfish. Body. Base: after {
content: '';
position: absolute;
Width: 3 em;
Height: 1 em;
Left: 1.75 em.
Top: 0.25 em.
Background: radial gradient (at 50% 120%, 25% transparent, cyan 0%);
}
/* : before pseudo-element before the element to add content, */
. Jellyfish. Body. Base: before {
content: '';
position: absolute;
Width: 3 em;
Height: 1 em;
Left: 5.25 em.
Top: 0.25 em.
Background: radial gradient (at 50% 120%, 25% transparent, cyan 0%);
}

/* HTML code: */
<body>

Effect:

Internal parts: guts (silver)
/* internal part */
. Jellyfish. Guts {
Width: 4 em;
Height: 4 em;
Background: white;
position: absolute;
Left: 3 em;
Top: 1 em;
border-radius: 50%;
/* using multiple shadow to render */
The box - shadow:
1.5 em em 0-0.7-0.8 em white,
1.7 em 0.5 em 0-1.4 em white,
1.8 em - 0.1 em 0-1.3 em white,
Em 1 to 0-0.6 em white em,
0.4 em em 0-1.8-1.3 em white,
1.4 em em - 1 0-1.5 em white,
1.3 em em 0-1.8-1.5 em white;
}
/* HTML code: */
<body>

Effect:

The eye part. Eyes. Left. Eyes. Right (gold)

/* eye part (left eye) */
. Jellyfish. Eyes. Eye {
position: absolute;
Width: 2 em;
Height: 2 em;
border-radius: 50%;
Background: white;
Left: 2.85 em.
Top: 3 em;
}
/* the location of the right eye */
. Jellyfish. Eyes. Eye. Right {
Left: 5.15 em.
}
/* eye */
. Jellyfish. Eyes. Eye: before {
content: '';
position: absolute;
Width: 70%;
Height: 70%;
background: darkblue;
border-radius: 50%;
Left: 15%;
Top: 15%;
}
/* eye in flash */
. Jellyfish. Eyes. Eye: after {
content: '';
position: absolute;
Width: 25%;
Height: 25%;
Background: # FFF.
border-radius: 50%;
Left: 25%;
Top: 25%;
Box - shadow: 0.4 em em 0-0.12 em white, 0.4 0.5 em em 0-0.05 0.15 em white;
}

/* HTML code: */
<body>

nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull

Page link：https//www.codepudding.com/frontend/74242.html

Prev:Why do I use the element UI photo wall will be caton phenomenon

Next:Web development

Tags：

HTML (CSS)

Links：
CodePudding