CSS特效制作寫輪眼

/* 定義外層容器 */
.eye-container {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
/* 定義紅色瞳孔 */
.eye {
width: 80px;
height: 80px;
border-radius: 50%;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, .5);
}
/* 定義白色眼球 */
.ball {
width: 200px;
height: 200px;
border-radius: 50%;
background: white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, .5);
transform: scale(0.5);
transition: transform 1s ease-in-out;
}
/* 定義hover效果 */
.eye-container:hover .ball {
transform: scale(1);
}

在這個例子中，我們使用了CSS制作一個動態(tài)的寫輪眼特效。我們首先定義了一個外層容器，使用了overflow屬性來裁剪容器內(nèi)容，使得瞳孔只能在容器內(nèi)部顯示。接著我們定義了一個紅色的瞳孔和白色的眼球，分別使用了position屬性來定位到容器的中心位置。為了增加真實(shí)感，我們使用了box-shadow屬性添加陰影。最后，我們使用了transition屬性定義了一個縮放動畫效果，當(dāng)鼠標(biāo)移入容器時，白色眼球會緩慢放大，并且觸發(fā)scale轉(zhuǎn)換，從而呈現(xiàn)一個動態(tài)的寫輪眼特效。