CSS中打鉤的方式有很多種,這里介紹其中兩種比較常見的寫法。
第一種方法是使用CSS偽元素的:before或:after,結(jié)合content屬性來實(shí)現(xiàn)打鉤效果。
.tick:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 20px; border-bottom: 2px solid #000; border-right: 2px solid #000; transform: translateY(-50%) rotate(45deg); }
上面的代碼中,我們創(chuàng)建了一個(gè)偽元素:before,并設(shè)置了content屬性為空字符串。為了讓偽元素顯示在父元素內(nèi)部,需要將其設(shè)置為塊級元素,并使用position屬性將其定位在父元素的中心位置。為了實(shí)現(xiàn)鉤的形狀,我們使用border-bottom和border-right屬性分別繪制底邊和右邊的直線,然后通過transform屬性將偽元素旋轉(zhuǎn)45度并向上移動(dòng)50%的高度,來獲得鉤的形狀。
第二種方法是使用SVG圖形,將其嵌入到HTML頁面中,并使用CSS對其進(jìn)行樣式修改。
.tick svg { width: 20px; height: 20px; stroke: #000; stroke-width: 2; fill: none; } .tick svg path { transition: stroke-dasharray .4s ease; stroke-dasharray: 15 35; stroke-dashoffset: -15; } .tick.checked svg path { stroke-dasharray: 50 0; stroke-dashoffset: 0; }
上面的代碼中,我們首先創(chuàng)建了一個(gè)SVG圖形,沒有填充色,只有黑色的線條。然后通過CSS對其進(jìn)行樣式修改,包括寬度、高度、線條顏色和寬度等屬性。為了實(shí)現(xiàn)打鉤的效果,我們使用stroke-dasharray和stroke-dashoffset屬性創(chuàng)建了一個(gè)虛線效果,stroke-dasharray屬性指定了虛線的樣式,stroke-dashoffset屬性指定了虛線起點(diǎn)的偏移量。當(dāng)元素被選中時(shí),我們再使用CSS修改stroke-dasharray和stroke-dashoffset屬性的值,實(shí)現(xiàn)打鉤的效果。