CSS3人物眨眼效果

.eye {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
}
.eye::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
background-color: black;
border-radius: 50%;
}
.eye::after {
content: "";
position: absolute;
top: 15px;
left: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
animation: blink 3s infinite;
}
@keyframes blink {
50% {
transform: scale(0.5);
}
}

代碼解釋

首先創建一個眼睛元素，設置其寬高和圓角，背景為白色。再使用偽元素before在眼睛中心創建一個黑色的圓形代表瞳孔。最后使用偽元素after創建一個白色的圓形代表眼珠，并使用CSS3動畫使其呈現眨眼效果。

動畫設置了3秒一次無限循環，其中50%的關鍵幀使用了scale屬性將眼珠縮小到原來的一半，形成眨眼的效果。