编写HTML代码鲸鱼,HTML5/CSS3鲸鱼样式的西瓜甜点

CSS

语言：

CSSSCSS

确定

body {

height: 100vh;

background: -webkit-linear-gradient(top, #ECECEC 200px, #59ABE3 201px);

background: linear-gradient(to bottom, #ECECEC 200px, #59ABE3 201px);

background-repeat: repeat-x;

overflow: hidden;

}

.container {

width: 300px;

height: 300px;

margin: 50px auto;

}

.sky {

width: 100%;

height: 50%;

background: #ECECEC;

}

/* fountain */

.fountain {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

position: relative;

bottom: 0;

width: 48%;

height: 100%;

margin: auto;

z-index: 5;

}

.water_top {

position: absolute;

width: 100%;

height: 100%;

background: -webkit-linear-gradient(315deg, #ECECEC 25%, transparent 25%) -50px 0, -webkit-linear-gradient(225deg, #ECECEC 25%, transparent 25%) -50px 0;

background: linear-gradient(135deg, #ECECEC 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECECEC 25%, transparent 25%) -50px 0;

background-size: 40px 30px;

background-repeat: repeat-x;

z-index: 2;

}

.water {

width: 26px;

height: 0;

border-bottom: 150px solid #59ABE3;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

/* end fountain */

.whale {

position: relative;

width: 100%;

height: 50%;

background: #59ABE3;

}

.whale::before {

content: "";

position: absolute;

top: -90px;

right: calc(50% - 90px);

width: 180px;

height: 90px;

background: #ECECEC;

z-index: 1;

}

.flesh {

position: relative;

top: -50%;

width: 150px;

height: 140px;

background: #C0392B;

border-radius: 50%;

margin: auto;

box-shadow: 0 0 0 8px #ede0af, 0 0 0 12px #26A65B;

}

.mouse {

position: relative;

top: -10px;

left: -9px;

width: 101px;

height: 103px;

border-radius: 50%;

border: 2px solid transparent;

border-bottom: 2px solid #000;

-webkit-transform: rotate(35deg);

transform: rotate(35deg);

}

.mouse::before {

content: "";

position: absolute;

right: 0px;

bottom: 13px;

width: 20px;

height: 20px;

border-radius: 50%;

border: 2px solid transparent;

border-bottom: 2px solid #000;

-webkit-transform: rotate(22deg);

transform: rotate(22deg);

}

.eye {

position: absolute;

top: 76px;

left: 61px;

width: 10px;

height: 10px;

border-radius: 50%;

border: 2px solid transparent;

border-bottom: 2px solid #000;

border-left: 2px solid #000;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.flipper_right,

.flipper_left {

position: absolute;

bottom: 25px;

right: 38px;

width: 16px;

height: 16px;

border-radius: 50%;

border: 2px solid transparent;

border-bottom: 2px solid #000;

}

.flipper_right::before {

content: "";

position: absolute;

top: -3px;

right: -14px;

width: 27px;

height: 27px;

border-radius: 50%;

border: 2px solid transparent;

border-bottom: 2px solid #000;

-webkit-transform: rotate(40deg);

transform: rotate(40deg);

}

.flipper_left {

width: 14px;

height: 14px;

right: 63px;

}

.flipper_left::before {

content: "";

position: absolute;

right: -39px;

top: -16px;

right: -36px;

width: 40px;

height: 40px;

border-radius: 50%;

border: 2px solid transparent;

border-bottom: 2px solid #000;

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

/* back */

.back {

position: relative;

top: -80px;

right: -110px;

width: 60px;

height: 50px;

z-index: 2;

}

.base {

position: absolute;

bottom: 0;

right: 20px;

width: 16px;

height: 12px;

background: #C0392B;

}

.base::before {

content: "";

position: absolute;

bottom: 0;

left: -10px;

width: 10px;

height: 10px;

border-radius: 50%;

border-right: 5px solid #C0392B;

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

.fin {

position: absolute;

bottom: 10px;

width: 20px;

height: 20px;

background: #C0392B;

}

.fin_r {

right: 9px;

border-radius: 50% 0 50% 0;

}

.fin_l {

left: 11px;

border-radius: 0 50% 0 50%;

}

/* end back */