CSS繪制貓貓的效果如下：
CSS繪制貓貓
下面是完整代碼，get起來吧～
浪漫的程序員可以多繪制一些其他圖案，送給另一半喲～
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS繪制貓貓</title>
<style>
* {
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
/* 畫布盒子 */
.box {
width: 800px;
height: 500px;
border: 2px dashed #fff;
margin: 100px auto;
position: relative;
}
/* 輪廓 */
.cat {
width: 400px;
height: 320px;
border: 10px solid #020202;
margin: 130px auto;
border-radius: 200px 200px 50% 50%;
background: #efe5d9;
position: relative;
}
/* 耳朵 */
.ear_l {
width: 140px;
height: 140px;
background: #efe5d9;
border-left: 10px solid #020202;
border-top: 10px solid #020202;
border-radius: 40px 50% 50% 50%;
position: absolute;
left: -30px;
top: -30px;
z-index: -1;
transform: rotate(10deg);
}
.ear_r {
width: 140px;
height: 140px;
background: #efe5d9;
border-right: 10px solid #020202;
border-top: 10px solid #020202;
border-radius: 50% 40px 50% 50%;
position: absolute;
right: -30px;
top: -30px;
z-index: -1;
transform: rotate(-10deg);
}
.ear_l_in {
transform: scale(0.7);
left: 2px;
top: 2px;
background: linear-gradient(120deg, #ea8a6a, #f4a084);
border: 0;
}
.ear_r_in {
transform: scale(0.7);
right: 2px;
top: 2px;
background: linear-gradient(-120deg, #ea8a6a, #f4a084);
border: 0;
}
/* 花紋 */
.wang {
width: 200px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -100px;
top: 2px;
}
.wang div {
background: #998881;
width: 30px;
float: left;
border-radius: 50%;
}
.wang_l {
height: 80px;
margin-left: 32px;
}
.wang_m {
height: 100px;
margin: 0 20px;
}
.wang_r {
height: 80px;
}
/* 眼睛 */
.eye_l {
position: absolute;
left: 60px;
}
.eye_r {
position: absolute;
right: 60px;
}
.eye {
width: 100px;
height: 100px;
top: 100px;
background: linear-gradient(120deg, #f0b334, #fbff80);
border-radius: 50%;
transition: 1s;
}
.eye_l_t,
.eye_l_d {
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
}
.eye_l_t {
border-top: 6px solid #000;
}
.eye_l_d {
border-bottom: 6px solid #000;
overflow: hidden;
}
.eye_in {
width: 50px;
height: 50px;
background: #000;
margin: 20px auto;
border-radius: 50%;
position: relative;
transition: 1s;
}
.eye_white {
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
position: absolute;
right: -5px;
top: 2px;
}
.eye_white_small {
width: 20px;
height: 10px;
background: #fff;
border-radius: 50%;
transform: rotate(-20deg);
position: absolute;
left: -5px;
top: 0;
}
.eye_white_small.shang {
top: 26px;
}
.eye_white_small.xia {
top: 40px;
transform: scale(0.8) rotate(-20deg);
left: 0;
}
/* 鼻子 */
.nose {
width: 40px;
height: 30px;
position: absolute;
left: 50%;
margin-left: -20px;
bottom: 100px;
border-radius: 50%;
border-bottom: 26px solid #000;
transition: 1s;
}
/* 嘴巴 */
.mouth {
width: 60px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 36px;
}
.mouth_l,
.mouth_r {
width: 100%;
height: 50px;
border-bottom: 8px solid #000;
border-radius: 50%;
position: absolute;
top: -36px;
transition: 1s;
}
.mouth_l {
left: -30px;
transform-origin: right center;
}
.mouth_r {
right: -30px;
transform-origin: left center
}
/* 胡子 */
.must {
width: 200px;
height: 100px;
position: absolute;
top: 180px;
transition: 1s;
}
.one,
.two,
.three {
border-radius: 50%;
position: absolute;
}
.one {
width: 160px;
height: 60px;
border-top: 2px solid #9d8c85;
transform: rotate(-10deg);
top: 10px;
}
.two {
width: 200px;
height: 80px;
border-top: 2px solid #9d8c85;
transform: rotate(8deg);
top: 40px;
}
.three {
width: 140px;
height: 70px;
border-top: 2px solid #9d8c85;
transform: rotate(30deg);
top: 70px;
}
.must_l {
left: -80px;
transform: rotateY(180deg) rotateZ(0deg);
}
.must_r {
right: -80px;
}
/* 腮紅 */
.face {
width: 100px;
height: 50px;
background: pink;
opacity: 0;
filter: blur(10px);
border-radius: 50%;
position: absolute;
top: 190px;
transition: 1s;
}
.face_l {
left: 50px;
}
.face_r {
right: 50px;
}
/* 心形 */
.love {
width: 60px;
height: 100px;
position: absolute;
right: 80px;
top: 0;
transform: rotate(45deg) scale(0) translateY(400px);
opacity: 0;
transition: 0.5s;
}
.love1 {
right: 200px;
top: 6px;
transform: rotate(-15deg) scale(0) translateY(400px);
}
.love .left,
.love .right {
width: 100%;
height: 100%;
background: red;
position: absolute;
border-radius: 30px 30px 0 0;
}
.love .left {
transform-origin: center bottom;
transform: translateX(21px) rotate(-45deg);
}
.love .right {
transform-origin: center bottom;
transform: translateX(-21px) rotate(45deg);
}
/* 動效 */
.cat:hover .eye {
height: 86px;
}
.cat:hover .eye_in {
margin-top: 10px;
}
.cat:hover .face {
opacity: 0.8;
}
.cat:hover .nose {
bottom: 104px;
}
.cat:hover .mouth_l {
transform: rotate(20deg);
}
.cat:hover .mouth_r {
transform: rotate(-20deg);
}
.cat:hover .must_l {
transform: rotateY(180deg) rotateZ(10deg);
}
.cat:hover .must_r {
transform: rotateZ(10deg);
}
.box:hover .love {
opacity: 1;
transform: rotate(45deg) scale(1) translateY(0);
}
.box:hover .love1 {
transform: rotate(-15deg) scale(0.6) translateY(0);
}
</style>
</head>
<body>
<div class="box">
<div class="cat">
<div class="ear_l">
<div class="ear_l ear_l_in"></div>
</div>
<div class="ear_r">
<div class="ear_r ear_r_in"></div>
</div>
<div class="wang">
<div class="wang_l"></div>
<div class="wang_m"></div>
<div class="wang_r"></div>
</div>
<div class="eye eye_l">
<div class="eye_l_t">
<div class="eye_l_d">
<div class="eye_in">
<div class="eye_white"></div>
<div class="eye_white_small shang"></div>
<div class="eye_white_small xia"></div>
</div>
</div>
</div>
</div>
<div class="eye eye_r">
<div class="eye_l_t">
<div class="eye_l_d">
<div class="eye_in">
<div class="eye_white"></div>
<div class="eye_white_small shang"></div>
<div class="eye_white_small xia"></div>
</div>
</div>
</div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="mouth_l"></div>
<div class="mouth_r"></div>
</div>
<div class="must must_r">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="must must_l">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="face face_l"></div>
<div class="face face_r"></div>
</div>
<div class="love">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="love love1">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
