纯css实现的冰墩墩
基本都是使用css的border、border-radius、transform属性将边框进行各种变形拼接而成
码云: 冰墩墩: 用css画一个冰墩墩 (gitee.com)
截图
代码
<!DOCTYPE html>
<html style="font-size: 200px;">
<head>
<title></title>
<style type="text/css">
* {
box-sizing: border-box;
}
body,html{
padding: 0;
margin: 0;
}
#bingdundun{
position: relative;
margin-left: 1rem;
margin-top: .5rem;
height: 3.4rem;
width: 3rem;
}
.body{
border: 0.06rem solid #000;
height: 100%;
width: 100%;
position: absolute;
border-radius: 55% 55% 55% 55% / 50% 50% 60% 60%;
top: 0;
left: 0;
background: #fff;
z-index: 1;
}
.ear{
width: .9rem;
height: 1.2rem;
position: absolute;
top: 0;
left: .2rem;
border: 0.06rem solid #000;
border-radius: 50% 60% 60% 50% / 50% 50% 50% 50%;
background: #000;
z-index: 0;
transform: rotate(-20deg);
}
.right_ear{
right: .2rem;
left: auto;
transform: rotateY(180deg) rotate(-20deg);
}
.face_1{
width: 2.2rem;
height: 1.7rem;
border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
border: 0.05rem solid #1c1f00;
position: absolute;
top: .45rem;
left: .4rem;
z-index: 1;
}
.face_2{
width: 2.28rem;
height: 1.78rem;
border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
border: 0.04rem solid #335fe6;
position: absolute;
top: .41rem;
left: .36rem;
z-index: 1;
}
.face_3{
width: 2.34rem;
height: 1.84rem;
border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
border: 0.03rem solid #ee39d3;
position: absolute;
top: .38rem;
left: .33rem;
z-index: 1;
}
.face_4{
width: 2.38rem;
height: 1.86rem;
border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
border: 0.02rem solid #edf466;
position: absolute;
top: .36rem;
left: .31rem;
z-index: 1;
}
.face_5{
width: 2.4rem;
height: 1.88rem;
border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
border: 0.02rem solid #6cf078;
position: absolute;
top: .34rem;
left: .29rem;
z-index: 1;
}
.left_hand{
position: absolute;
z-index: 0;
width: .8rem;
height: 1.3rem;
border-radius: 50%;
background: #000;
top: 1rem;
left: -.5rem;
transform: rotate(-15deg);
}
.left_hand:after{
position: absolute;
content: '';
width: 1.3rem;
height: .8rem;
background: #000;
border-radius: 50%;
transform: rotate(35deg);
top: 0.71rem;
}
.right_hand{
position: absolute;
z-index: 0;
height: .8rem;
width: .8rem;
border-radius: 50%;
background: #000;
right: -.5rem;
top: 2.2rem;
}
.right_hand:after{
position: absolute;
background: #000;
width: 0.8rem;
height: 0.8rem;
top: -0.24rem;
left: -0.26rem;
content: '';
transform: rotate(-47deg);
border-radius: 0 0 0 80%;
}
.left_foot{
position: absolute;
background: #000;
width: .9rem;
height: .9rem;
top: 3rem;
left: .3rem;
border-radius: 50%;
}
.left_foot:after{
position: absolute;
z-index: 0;
height: .9rem;
width: .9rem;
content: '';
background: #000;
top: -0.45rem;
transform: rotate(12deg);
left: 0.1rem;
border-radius: 0 50% 50% 0;
}
.right_foot{
position: absolute;
background: #000;
width: .9rem;
height: .9rem;
top: 3rem;
right: .3rem;
border-radius: 50%;
}
.right_foot:after{
position: absolute;
z-index: 0;
height: .9rem;
width: .9rem;
content: '';
background: #000;
top: -0.45rem;
transform: rotate(-12deg);
right: 0.1rem;
border-radius: 0 0 0 50%;
}
.left_eye{
position: absolute;
width: 0.6rem;
height: .8rem;
top: 0.8rem;
left: 0.65rem;
background: #000;
z-index: 2;
border-radius: 50%;
transform: rotate(45deg);
}
.left_eye:after,.right_eye:after{
position: absolute;
width: .3rem;
height: .3rem;
border: .03rem solid #fff;
border-radius: 50%;
content: '';
top: .1rem;
left: .15rem;
}
.right_eye:after{
left: auto;
right: .15rem;
}
.left_eye:before,.right_eye:before{
top: .23rem;
left: .22rem;
position: absolute;
width: .1rem;
height: .1rem;
background: #fff;
border-radius: 50%;
content: '';
}
.right_eye:before{
left: 0.22rem;
top: 0.18rem;
}
.right_eye{
position: absolute;
width: 0.6rem;
height: .8rem;
top: 0.8rem;
right: 0.65rem;
background: #000;
z-index: 2;
border-radius: 50%;
transform: rotate(-45deg);
}
.mouth{
border: 0.05rem solid #000;
position: absolute;
top: 1.3rem;
width: 1rem;
height: 0.5rem;
z-index: 1;
left: 50%;
margin-left: -0.5rem;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
border-top: none;
}
.mouth:after,.mouth:before{
position: absolute;
content: '';
width: .5rem;
background: #fff;
height: 0.5rem;
top: -0.15rem;
transform: rotate(45deg);
}
.mouth:after{
left: -0.21rem;
}
.mouth:before{
right: -0.21rem;
}
.mouth_dot{
position: relative;
width: 100%;
height: 100%;
z-index: 2;
}
.mouth_dot:after,.mouth_dot:before{
position: absolute;
top: .333rem;
width: 0.05rem;
height: 0.05rem;
border-radius: 50%;
background: #000;
content: '';
}
.mouth_dot:after{
left: .113rem;
}
.mouth_dot:before{
right: .113rem;
}
.nose{
background: #000;
width: .3rem;
height: .3rem;
position: absolute;
left: 50%;
margin-left: -0.15rem;
top: 1.25rem;
z-index: 1;
transform: rotate(50deg) skewY(-10deg);
border-radius: 30%;
}
.nose:after{
width: 0.352rem;
height: 0.36rem;
position: absolute;
content: '';
border-radius: 50%;
border-top: 0.1rem solid #fff;
top: -0.07rem;
transform: rotate(-45deg) skewY(0deg);
left: -0.017rem;
}
.heart{
width: .5rem;
height: .5rem;
position: absolute;
top: 1.25rem;
left: -.32rem;
z-index: 2;
}
.heart:before,.heart:after{
content: "";
position:absolute;
width: .12rem;
height: .2rem;
background-color: red;
border-radius: .2rem .2rem 0 0;
top: 0;
}
.heart:before{
transform:rotate(-45deg);
left: 0;
}
.heart:after{
transform:rotate(45deg);
right: .32rem;
}
.logo{
background-image: url("./dongao.png");
background-repeat: no-repeat;
width: .5rem;
position: absolute;
height: .8rem;
z-index: 2;
background-size: contain;
top: 2.45rem;
left: 50%;
margin-left: -0.25rem;
}
</style>
</head>
<body>
<div id="bingdundun">
<div class="body"></div>
<div class="ear"></div>
<div class="ear right_ear"></div>
<div class="face_1"></div>
<div class="face_2"></div>
<div class="face_3"></div>
<div class="face_4"></div>
<div class="face_5"></div>
<div class="left_hand"></div>
<div class="right_hand"></div>
<div class="left_foot"></div>
<div class="right_foot"></div>
<div class="left_eye"></div>
<div class="right_eye"></div>
<div class="mouth"><div class="mouth_dot"></div></div>
<div class="nose"></div>
<div class="heart"></div>
<div class="logo"></div>
</div>
</body>
</html>
