这是demo的原型连接https://codepen.io/khr2003/pen/BGZdXw
制作思路：
把小熊猫分解
image.png
1.定位思路：position: absolute;的绝对定位
2.宽高通过继承父容器containe宽高的百分比定宽高
3.小熊猫分解成脸部、耳朵、毛三部分
.container{
height:50vh;
width:50vh;
left:50%;
top:50%;
margin-top:-25vh;
margin-left:-25vh;
position:absolute;
}
居中显示
.face
{
position: absolute;
background-color: #f68122;
width: 70%;
height: 50%;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
overflow: hidden;
left: 15%;
top: 25%;
}
关键 border-radius 画一个不规则圆
.mouth{
position: absolute;
bottom: 5%;
width: 40%;
height: 40%;
background-color: white;
border-radius: inherit;
left: 30%;
}
同理嘴部背景也是缩放
lips-top是制作嘴部弯曲的区域限制
两个弯的嘴可以看作是一个白色的正方体纯在底部和右部的border
并且border做了radius，并且做了旋转效果 transform: rotate(6deg);
.lips-top{
position:absolute;
top: 50%;
left: 30%;
height:28%;
width: 40%;
`border-radius: 50% 50%;
z-index: 2;
}
.lips-top::before{
content: "";
position: absolute;
right: 50%;
top: 0;
width: 50%;
height: 100%;
background-color: white;
border-radius: 0 0 50% 30%;
transform: rotate(6deg);
border-right: 4px solid #3d2115;
border-bottom: 4px solid #3d2115;
}
.lips-top::after{
content: "";
position: absolute;
left:50%;
width: 50%;
height: 100%;
background-color: white;
border-radius:0 0 30% 50% ;
transform: rotate(-6deg);
border-left: 4px solid #3d2115;
border-bottom: 4px solid #3d2115;
}
image.png
眉毛是一个长方体，左右白色右边橙色，在白色部分画一个圆向橙色部分偏移50%。橙色部分画一个圆向白色部分偏移50%，旋转椭圆，
.eyebrow{
position: absolute;
top: 18%;
height: 20%;
width: 16%;
background: linear-gradient(-90deg, white 50%, #f68122 51%);//线性渐变左边白色右边橙色
z-index: 1;
border-radius: 50%;
transform: rotate(15deg);
}
.eyebrow::before, .eyebrow::after
{
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
height: 43%;
width: 40%;
background-color: white;
border-radius: 50%;
}
.eyebrow::after{
top: 41%;
left: 59%;
background-color: #f68122;
height: 60%;
width: 60%;
}
.eyebrow.left{
left: 31%;
}
.eyebrow.right{
right: 31%;
background: linear-gradient(-90deg, #f68122 50%, white 51%);
}
脸颊部分白色是cheek的白色阴影效果，box-shadow: -25px 3px 0 8px white;
cheek的内容是棕色椭圆形，棕色椭圆形上面叠加了倾斜的橙色椭圆形，由于脸颊的z-index小于嘴部，倾斜的橙色椭圆形部分在嘴部下面。
image.png
.cheek{
position: absolute;
top: 37%;
height: 70%;
width: 20%;
z-index: 0;
border-radius: 50%;
background-color: #3d2115;
}
.cheek.left{
left: 18%;
box-shadow: -25px 3px 0 8px white;
}
.cheek.right{
right:18%;
box-shadow: 25px 3px 0 8px white;
}
.cheek::before{
content: "";
background-color: #f68122;
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
transform-origin: top center;
border: 0px solid transparent;
}
.cheek.left::before{
top: -2%;
left: -7%;
transform: rotate(-15deg);
}
.cheek.right::before{
top: -2%;
right: -7%;
transform: rotate(15deg);
}
2耳朵部分
一个倾斜的长方体内有圆形，圆形border3px白色
image.png
圆形左侧border20%，旋转-45后，skew(20deg, 20deg);2D扭曲
image.png
.ear.left{
position: absolute;
height: 25%;
width: 25%;
left: 10%;
top: 25%;
overflow: hidden;
transform: translate(-25%, -25%) rotate(-40deg);
z-index: -1;
border:1px solid
}
.ear.left::before{
content: "";
position: absolute;
left: 0;
top: 60%;
width: 100%;
height: 100%;
border: 7px solid white;
background-color: #3d2115;
box-sizing: border-box;
transform: rotate(45deg) skew(20deg, 20deg);
border-radius: 20% 50% 50% 50%;
}
