效果圖.png
參考文章：http://www.javanx.cn/20190102/2019-css-pig/
‘豬’，代表著聚財(cái)福氣，豬年即將到來，祝大家‘豬’事順利，我屬豬，你嘞（斜眼笑）
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>豬豬</title>
<link rel="stylesheet" type="text/css" href="./css/test.css">
</head>
<body>
<div class="pig">
<div class="body">
<div class="ear"></div>
<div class="eye">
<div class="left-eye"></div>
<div class="right-eye"></div>
</div>
<div class="nose"></div>
</div>
<div class="foot">
<div class="left-foot"></div>
<div class="right-foot"></div>
</div>
</div>
</body>
</html>
scss
* {
padding: 0;
margin: 0;
}
@mixin ear {
content: '';
display: inline-block;
width: 50px;
height: 50px;
background: #db7452;
border-radius: 50% 0;
box-shadow: 1px 1px 4px #8c2d1b;
}
@mixin eye($width,$height,$marginL) {
position: relative;
content: '';
display: inline-block;
margin-left: $marginL;
width: $width;
height: $height;
}
@mixin nose($left) {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #d27658;
position: relative;
left: $left;
}
@mixin foot($deg) {
content: '';
display: inline-block;
width: 0;
height: 0;
border-width: 5px 15px 8px 5px;
border-color: transparent #f3ad8f transparent transparent;
border-style: solid;
transform: rotate($deg);
}
.pig {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
// 身體就是個橢圓
.body {
width: 200px;
height: 150px;
border: 1px solid #f3ad8f;
border-radius: 120px 120px 100px 100px;
background-color: #f3ad8f;
position: relative;
// 耳朵也是在圓形的基礎(chǔ)上進(jìn)行變形
.ear {
width: 100%;
height: 50px;
position: absolute;
top: -10px;
&::before {
@include ear;
margin-left: 20px;
}
&::after {
@include ear;
float: right;
transform: rotateY(180deg);
margin-right: 20px;
}
}
// 眼睛是由一個三角和橢圓拼接而成
.eye {
width: 100%;
height: 20px;
margin-top: 60px;
> div {
width: 48%;
height: 100%;
text-align: center;
display: inline-block;
&::before {
@include eye(0px,0px,8px);
left: -5px;
top: -1px;
border-width: 4px;
border-style: solid;
border-color: transparent #000 transparent transparent;
}
&::after {
@include eye(5px,10px,-5px);
background: #000;
border-radius: 0 10px 10px 0;
}
}
}
// 鼻子是由一個橢圓和兩個圓拼接而成
.nose {
width: 60px;
height: 30px;
background: #da938f;
border-radius: 20px;
position: relative;
left: 50%;
transform: translateX(-50%);
text-align: center;
&::before {
@include nose(-10px);
}
&::after {
@include nose(10px);
}
}
}
// 腳是由兩個三角形拼接而成
.foot {
width: 200px;
height: 20px;
margin-top: -10px;
.left-foot {
float: left;
margin-left: 20px;
transform: rotate(20deg);
&::before {
@include foot($deg:-80deg);
}
&::after {
@include foot($deg:-100deg);
margin-left: -10px;
}
}
.right-foot {
float: right;
margin-right: 20px;
transform: rotate(-20deg);
&::before {
@include foot($deg:-80deg);
}
&::after {
@include foot($deg:-100deg);
margin-left: -10px;
}
}
}
}
