CSS點擊手是一種在web頁面中添加交互元素的方法,它可以讓用戶感知到某個元素是可以被點擊的。通過使用CSS偽元素和一些樣式屬性,我們可以創建一個漂亮的點擊手效果。
/* 創建點擊手 */ a { cursor: pointer; position: relative; display: inline-block; } /* 創建手指 */ a::before { content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); background-color: #f1f1f1; } /* 手指上的小丘 */ a::after { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); background-color: #ddd; box-shadow: 0px 2px 2px rgba(0,0,0,0.2); } /* 鼠標懸浮效果 */ a:hover::before { background-color: #ddd; } a:hover::after { background-color: #f1f1f1; }
在上述代碼中,我們使用了::before和::after偽元素來創建手指和小丘。我們將它們設置為絕對定位,并通過left和top屬性將它們放置在適當的位置。我們還為手指和小丘分別設置了不同的背景顏色,并為小丘添加了一個陰影效果。
添加這些樣式后,我們的鏈接將會出現一個漂亮的點擊手效果。當鼠標懸停在鏈接上時,點擊手效果的顏色也會發生變化,使得用戶能夠更加清楚地看到鏈接可以被點擊。