CSS眼球是一種在文字中使用的視覺效果,它可以讓文字產生動態的眨眼效果,非常適合用來裝飾標題或是其他特殊的文字。使用CSS眼球非常簡單,只需要將它的代碼嵌套到你的CSS代碼中即可。
.eye { width: 30px; height: 30px; border-radius: 50%; background-color: white; position: relative; } .eye::before { content: ""; display: block; width: 12px; height: 12px; background-color: black; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: move 2s infinite alternate; } @keyframes move { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -70%); } 100% { transform: translate(-50%, -50%); } }
在上面的代碼中,我們定義了一個名為.eye的CSS類,它是一個圓形的小眼睛;同時使用了CSS偽元素::before來在眼睛中間添加一個圓形的黑點。接下來,我們使用CSS關鍵幀動畫move來讓黑點在眼睛中間上下移動,從而產生眨眼的效果。
如果你想要將CSS眼球應用到你的網站中,只需要在需要使用的文本上添加類名.eye即可,例如:
這是一個眼球標題
這是一段普通的文本
這是另一個眼球標題
當你在瀏覽器中打開這個頁面時,眼球標題將產生動態的眨眼效果,非常醒目。
總之,CSS眼球是一個非常簡單、有趣、實用的CSS小技巧,它可以為你的網站增添一些特別的魅力!