這是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%;
}
關(guān)鍵 border-radius 畫一個不規(guī)則圓
.mouth{
position: absolute;
bottom: 5%;
width: 40%;
height: 40%;
background-color: white;
border-radius: inherit;
left: 30%;
}
同理嘴部背景也是縮放
lips-top是制作嘴部彎曲的區(qū)域限制
兩個彎的嘴可以看作是一個白色的正方體純在底部和右部的border
并且border做了radius，并且做了旋轉(zhuǎn)效果 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%秉溉，旋轉(zhuǎn)橢圓，
.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的內(nèi)容是棕色橢圓形召嘶，棕色橢圓形上面疊加了傾斜的橙色橢圓形，由于臉頰的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耳朵部分
一個傾斜的長方體內(nèi)有圓形，圓形border3px白色
image.png
圓形左側(cè)border20%尝苇，旋轉(zhuǎn)-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%;
}
