CSS3變裝皮卡丘

/* 定義皮卡丘的頭 */
#head {
width: 90px;
height: 90px;
background-color: #ffcd2c;
border-radius: 50% 50% 45% 45%;
position: relative;
top: 50px;
box-shadow: -5px -10px 0 #000, -15px -10px 0 #000;
}
/* 定義皮卡丘的耳朵 */
.ear {
width: 15px;
height: 30px;
background-color: #ffcd2c;
position: absolute;
top: -20px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(15deg);
}
.ear.left {
left: -10px;
}
.ear.right {
right: -10px;
transform: rotate(-15deg);
}
/* 定義皮卡丘的眼睛 */
.eye {
width: 25px;
height: 25px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 30px;
}
.eye.left {
left: 28px;
}
.eye.right {
right: 28px;
}
/* 定義皮卡丘的眼珠 */
.pupil {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 7px;
left: 7px;
}
/* 定義皮卡丘的口 */
.mouth {
width: 50px;
height: 25px;
background-color: #661313;
border-radius: 25px/15px;
position: absolute;
top: 50px;
left: 20px;
overflow: hidden;
}
.mouth::after {
content: "";
width: 30px;
height: 40px;
background-color: #ff485f;
border-radius: 50%;
position: absolute;
top: -15px;
left: 10px;
}
/* 定義皮卡丘的鼻子 */
.nose {
width: 15px;
height: 10px;
background-color: #000;
border-radius: 50% 50% 40% 40%;
position: absolute;
top: 45px;
left: 35px;
}

以上是變裝皮卡丘的CSS代碼，如果將這些代碼加入到HTML文檔中的style標簽中，就可以在網頁上展示出漂亮的皮卡丘了。