CSS3眨眼睛代碼
/* HTML代碼 */
<div class="eye">
<div class="pupil"></div>
<div class="lid top"></div>
<div class="lid bottom"></div>
</div>
/* CSS代碼 */
.eye {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
overflow: hidden;
}
.pupil {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: black;
top: 35px;
left: 35px;
}
.lid {
position: absolute;
width: 100%;
height: 35%;
border-radius: 50%;
background-color: white;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
.lid.top {
top: 0;
}
.lid.bottom {
bottom: 0;
}
.eye:hover .lid.top {
transform: translateY(-100%);
}
.eye:hover .lid.bottom {
transform: translateY(100%);
}代碼解析：
該眼睛由HTML和CSS代碼組成。首先是HTML代碼，包括一個父容器
和子容器
和兩個
和
，這兩個子容器用來控制眼瞼的動畫效果。
接下來是CSS代碼。父容器.eye被設置為相對定位，并且擁有圓形的寬度和高度，還有一個白色背景，并通過border-radius屬性來創建圓形邊框。其它的樣式都是為了讓父容器和子容器相互協調。
子容器.pupil被設置為絕對定位，并且擁有30像素的寬度和高度，通過計算位置，將它放置在父容器中心的位置。
子容器.lid是兩個用于創建眼瞼的白色半圓，它們的寬度和高度都是父容器的35%，并被設置為絕對定位，以便它們自由移動。兩個子容器的.top和.bottom樣式定義了它們的位置和方向。
最后，通過:hover偽類，當鼠標懸停在父容器上時，使用CSS3過渡效果并將兩個孩子容器上或下移動，從而創造出眨眼動畫的感覺。