CSS3的出現為網頁美化帶來了很多新的可能，其中很多值得一提的特效就是眼睛。通過CSS3的代碼實現，我們可以得到非常逼真和生動的眼睛效果。

.eye {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #000;
background: #fff;
position: relative;
overflow: hidden;
}
.eye::before {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
position: absolute;
right: 10px;
top: 10px;
transition: all .3s ease-in-out;
}
.eye:hover::before {
width: 10px;
height: 10px;
top: 15px;
border-radius: 50% 50% 0 0;
}

以上代碼展示了一個基礎版的眼睛效果，接下來我們來講講它是怎么實現的。

首先，我們創建了一個寬高為50px的容器，并設置了50%的圓角和2px的黑色邊框。為了保證眼球會在容器內部顯示，我們還需要設置一下overflow屬性為hidden。接下來，我們在容器中使用了一個偽元素::before，并設置了寬高20px，圓角50%等屬性，緊接著使用了position:absolute屬性將它放置在容器的右上角。我們還對它設置了黑色背景，這樣就形成了眼睛的白色區域和黑色眼球區域。注意，我們這里要使用::before而不是::after是因為我們想讓眼球覆蓋在眼睛上方，從而達到立體效果。

接下來，我們使用了CSS3中的transition屬性實現了鼠標hover時眼球變小的效果。我們將它的寬高更改為10px，并將border-radius屬性修改為50% 50% 0 0，從而讓眼球變成尖角狀。

通過這樣簡單的代碼實現，我們就可以得到一個跟真實眼睛非常相似的效果。當然，我們還可以通過更改顏色、加上瞳孔等效果來調整我們的眼睛。