知識點 ：
CSS:CSS變量的應用，基本的css屬性
CSS3 ：邊框border 、圓角border-radius、盒子陰影box-shadow、徑向漸變radial-gradient、transform中的 rotate，translateX ，動畫@keyframes
實現多邊形 實現了皮卡丘 鼻子的閃動和眼睛的閃爍等效果效果，
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>皮卡丘</title>
</head>
<body>
<audio autoplay src="http://music.163.com/song/media/outer/url?id=1332699115.mp3"></audio>
<h4>皮卡 皮卡(*╹▽╹*)</h4>
<div class="pika-outside">
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="pika-body">
<div class="eye-left">
<div class="eye-inside-left"></div>
</div>
<div class="eye-right">
<div class="eye-inside-right"></div>
</div>
<div class="nose"></div>
<div class="lips"></div>
<div class="mouth"></div>
<div class="cheek-left"></div>
<div class="cheek-right"></div>
</div>
</div>
</body>
<style>
/* CSS變量的應用 */
:root{
--bg-color:#ffcccc;
--pika-body-color:#ffd01c;
--shadow-color:#d8851c;
--pika-side-color:#1b1919;
}
body{
background-color: var(--bg-color);
}
.pika-outside{
margin:250px auto;
position: relative;
width: 390px;
}
h4{
text-align: center;
font-family: "方正舒體";
margin-top: 100px;
font-size: 22px;
}
.pika-body{
width: 370px;
height: 320px;
background-color: var(--pika-body-color);
border-radius: 45%;
box-shadow: inset -5px -8px var(--shadow-color);
margin: auto;
border:4px solid rgb(34, 33, 33);
z-index: 2;
position: relative;
overflow: hidden;
}
.ear-right,.ear-left{
width:410px;
height: 70px;
border:4px solid #000;
position: absolute;
top:-50px;
background:radial-gradient(circle at 200% 45%, #ffd01c 0%, #ffd01c 90%, black 10%);
border-radius: 50%;
}
@keyframes waving{
0% {
transform: rotate(40deg);
}
5% {
transform: rotate(50deg);
}
10% {
transform: rotate(40deg);
}
12% {
transform: rotate(45deg);
}
15% {
transform: rotate(40deg);
}
100% {
transform: rotate(40deg);
}
}
.ear-left{
left:-180px;
transform: rotate(40deg);
animation: 3s infinite waving;
}
.ear-right{
right:-160px;
transform: rotate(110deg);
}
.cheek-left,.cheek-right{
width: 86px;
height: 86px;
background: red;
border:4px solid #000;
border-radius: 50%;
position: absolute;
bottom: 30px;
}
.cheek-left{
left:-20px;
}
.cheek-right{
right: -20px;
}
.eye-left,.eye-right{
position: absolute;
width: 70px;
height: 70px;
background: var(--pika-side-color);
top:38%;
border-radius: 50%;
}
.eye-left{
left:20%;
}
.eye-right{
right: 20%;
}
.eye-inside-left,.eye-inside-right{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top:13%;
background: #fff;
animation: 0.1s infinite twinkling;
}
.eye-inside-left{
right: 10px;
}
.eye-inside-right{
left:10px;
}
/* 讓皮卡丘的眼睛有閃動的效果 */
@keyframes twinkling{
from{
transform: translateX(0%);
}
to{
transform: translateX(2%);
}
}
.nose{
width:0;
height: 0;
border:10px solid transparent;
border-top-color: var(--pika-side-color);
border-left-width: 15px;
border-right-width: 15px;
border-radius: 10px;
position: relative;
top:60%;
left:45%;
}
/* lips和mouth, 嘴脣部分完全參考原出處，利用僞元素和盒子陰影 實現皮卡丘鼻子的圓弧效果 */
.lips {
position: relative;
margin: auto;
width: 1px;
height: 1px;
top: 60%;
z-index: 2;
}
.lips::after, .lips::before {
position: absolute;
content: "";
top: -20px;
width: 50px;
height: 40px;
border-radius: 50%;
box-shadow: inset 0px -4px 0 var(--pika-side-color);
background-color: #ffd01c;
}
.lips::before {
right: 0px;
}
.lips::after {
left: 0px;
}
.mouth {
position: relative;
height: 60px;
width: 60px;
margin: auto;
top: 60%;
border: 4px solid #1b1919;
border-radius: 0 0 50% 50%;
z-index: 1;
background: radial-gradient(circle at center 80%, #e93c4e 0%, #e93c4e 50%, #9e2d38 50%, #9e2d38 60%, #1b1919 60%, #1b1919 65%, #5c0009 65%);/*徑向漸變*/
}
</style>
</html>
效果預覽：
效果如圖，稍作修改可以用作表白哦： （ 有背景音樂，耳朵和眼睛都有動畫，這裏是靜圖，看不出來效果 ）
（可以新建一個記事本文件.txt，將上面的代碼複製粘貼上去，保存後將文件的後綴名改爲.html即可直接訪問）