效果
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
* {
box-sizing: border-box;
}
.ice {
width: 198px;
margin: 30px auto;
position: relative;
}
.main-body {
width: 198px;
height: 232px;
background: #fff;
border: 2px solid #333;
border-radius: 47% 47% 47% 47%/50%;
}
.ear {
width: 37px;
height: 37px;
background: #000;
border-radius: 50%;
position: absolute;
left: 18px;
top: 6px;
z-index: -1;
}
.ear.right {
left: unset;
right: 18px;
}
.arm-left {
width: 71px;
height: 31px;
background: #000;
border-radius: 50%;
position: absolute;
left: -22%;
top: 54%;
z-index: -1;
transform: rotate(302deg);
}
.arm-right {
width: 71px;
height: 31px;
background: #000;
border-radius: 50%;
position: absolute;
right: -23%;
top: 28%;
z-index: -1;
transform: rotate(300deg);
}
.hand-left {
width: 27px;
height: 30px;
background: #000;
border-radius: 50%;
position: absolute;
left: -16%;
top: 63%;
z-index: -1;
}
.hand-right {
width: 30px;
height: 28px;
background: #000;
border-radius: 50%;
position: absolute;
right: -17%;
top: 19%;
z-index: -1;
}
.heart {
position: relative;
transform: scale(0.045, 0.045) rotate(61deg);
left: 123px;
top: 53px;
}
.div1 {
position: fixed;
top: -26px;
left: 100px;
height: 0px;
width: 0px;
border: 100px solid #e51b1b;
border-radius: 100px;
}
.div2 {
position: fixed;
top: 100px;
left: -26px;
height: 0px;
width: 0px;
border: 100px solid #e51b1b;
border-radius: 100px;
}
.div3 {
position: fixed;
top: 100px;
left: 100px;
height: 0px;
width: 0px;
border: 100px solid #e51b1b;
}
.leg {
width: 48px;
height: 78px;
background: #000;
border-radius: 32%/55%;
position: absolute;
left: 19%;
bottom: -9%;
z-index: -1;
}
.foot {
width: 37px;
height: 15px;
background: #000;
border-radius: 50%;
position: absolute;
left: 23%;
top: 104%;
z-index: -1;
}
.leg.right {
left: unset;
right: 19%;
bottom: -9%;
}
.foot.right {
left: unset;
right: 23%;
top: 104%;
}
.face {
width: 74%;
height: 120px;
margin: 24px auto;
position: relative;
border: 1px solid #125af5;
border-radius: 50% 50% 38% 38%;
box-shadow: 0 0 0 0.5px #ffffff, 0 0 0 1.2px black, 0 0 0 2.1px #ffffff, 0 0 0 3px rgb(47 245 47), 0 0 0 4px #ffffff, 0 0 0 5px yellow, 0 0 0 6px #ffffff, 0 0 0 6.8px red, 0 0 0 7.6px #ffffff, 0 0 0 8.4px pink, 0 0 0 9.2px #ffffff, 0 0 0 9.9px #9e02f8;
}
.face-circle {
width: 72%;
height: 122px;
margin: 25px 26px auto;
position: absolute;
border: 1px solid black;
border-radius: 50% 50% 57% 58%;
z-index: 1;
opacity: 0.5;
box-shadow: 0 0 0 0.5px #ffffff, 0 0 0 1.2px rgb(22 134 226), 0 0 0 2.1px #ffffff, 0 0 0 3px rgb(243 13 128), 0 0 0 4px #ffffff, 0 0 0 5px rgb(245 135 32), 0 0 0 6px #ffffff, 0 0 0 6.8px rgb(167 22 235), 0 0 0 7.6px #ffffff, 0 0 0 8.4px rgb(71 250 167), 0 0 0 9.2px #ffffff, 0 0 0 9.9px #fddc47;
}
.blackeye {
width: 41px;
height: 64px;
background: #000;
top: 18%;
left: 8%;
border-radius: 46% 49% 47% 50%;
position: absolute;
transform: rotate(44deg);
}
.blackeye.right {
left: unset;
right: 8%;
border-radius: 49% 46% 50% 47%;
transform: rotate(-44deg);
}
.eye {
width: 22px;
height: 24px;
background: #000;
border-radius: 50%;
border: 2px solid #fff;
position: relative;
transform: rotate(-45deg);
top: 13px;
left: 13px;
}
.eye1 {
width: 7px;
height: 8px;
position: relative;
border-radius: 50% 50% 50% 50%;
box-shadow: 0px 0px 5px 4px #a6c3cd;
-moz-box-shadow: 0 0 16px #DDD;
-webkit-box-shadow: 1 22 22px #ddd;
background: linear-gradient(-40deg, rgb(60 54 62) 0%, rgb(57 56 68) 52%, rgb(48 66 88) 100%);
opacity: 0.6;
top: 6px;
left: 5.5px;
}
.eye2 {
width: 5px;
height: 5px;
top: -6px;
left: 9px;
border-radius: 50%;
background: white;
position: relative;
}
.eye3 {
width: 3px;
height: 3px;
top: 1px;
left: 5px;
border-radius: 50%;
background: #91e3f58f;
position: relative;
}
.eye4 {
width: 1.5px;
height: 3.5px;
top: -13px;
left: 2px;
border-radius: 50%;
background: #d0f7f3a8;
transform: rotate(30deg);
position: relative;
}
.eye5 {
width: 7px;
height: 8px;
position: relative;
border-radius: 50% 50% 50% 50%;
box-shadow: 0px 0px 5px 4px #a6c3cd;
-moz-box-shadow: 0 0 16px #DDD;
-webkit-box-shadow: 1 22 22px #ddd;
background: linear-gradient(-40deg, rgb(60 54 62) 0%, rgb(57 56 68) 52%, rgb(48 66 88) 100%);
opacity: 0.6;
top: -3px;
left: 12.5px;
transform: rotate(45deg);
}
.eye6 {
width: 5px;
height: 5px;
top: -12px;
left: 19px;
border-radius: 50%;
background: white;
position: relative;
}
.eye7 {
width: 3px;
height: 3px;
top: -11px;
left: 9px;
border-radius: 50%;
background: #91e3f58f;
position: relative;
}
.eye8 {
width: 1.5px;
height: 3.5px;
top: -25px;
left: 14px;
border-radius: 50%;
background: #d0f7f3a8;
transform: rotate(30deg);
position: relative;
transform: rotate(70deg);
}
.eye.right {
top: 13px;
left: 5px;
transform: rotate(45deg);
}
.nose {
width: 15px;
height: 11px;
top: 44%;
left: 50%;
border-radius: 50% 50% 60% 60%/50% 50% 70% 70%;
position: absolute;
background-color: #000;
transform: translateX(-50%);
z-index: 1;
}
.nose-light {
width: 5px;
height: 10px;
top: -1.5px;
left: 5px;
border-radius: 50%;
background: linear-gradient(90deg, rgb(144 153 155) 0%, rgb(0 0 0) 100%);
transform: rotate(90deg);
position: relative;
}
.mouth {
width: 31px;
height: 16px;
top: 50%;
left: 50%;
box-shadow: inset 0em -0.15em 0px 0em black;
background-color: white;
border-radius: 50%;
position: absolute;
transform: translateX(-50%);
}
.tongue {
width: 2px;
height: 12px;
top: 8.8px;
left: 14.6px;
border-radius: 50%;
background: linear-gradient(90deg, rgb(245 10 10) 0%, rgb(106 12 12) 100%);
transform: rotate(90deg);
position: relative;
}
</style>
</head>
<body>
<div class="ice">
<div class="ear"></div>
<div class="ear right"></div>
<div class="arm-left"></div>
<div class="arm-right"></div>
<div class="hand-left"></div>
<div class="hand-right"></div>
<div class="heart">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<div class="foot"></div>
<div class="foot right"></div>
<div class="leg"></div>
<div class="leg right"></div>
<div class="main-body">
<div class="face-circle"></div>
<div class="face">
<div class="blackeye">
<div class="eye">
<div class="eye1"></div>
<div class="eye2"></div>
<div class="eye3"></div>
<div class="eye4"></div>
</div>
</div>
<div class="blackeye right">
<div class="eye right"></div>
<div class="eye5"></div>
<div class="eye6"></div>
<div class="eye7"></div>
<div class="eye8"></div>
</div>
<div class="nose">
<div class="nose-light"></div>
</div>
<div class="mouth">
<div class="tongue"></div>
</div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>
