CSS 對勾效果
分享一段程式碼例項,它利用css3實現了對勾效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .light{ position: relative; width: 24px; height: 24px; } .light::after{ position: absolute; top: 4px; left: 8px; width: 6px; height: 10px; border-style: solid; border-color: red; border-width: 0 2px 2px 0; transform: rotateZ(45deg); content: ""; } .light.off::after { border-color: white; } </style> </head> <body> <span class="light"></span> </body> </html>
利用一個矩形相鄰的兩個邊框,然後再將其旋轉一定的角度,即可實現對勾效果。
class屬性值同時具有light和off類,其實沒有必要使用off,這麼寫的一個好處是可以根據需要新增或者刪除off類。
相關閱讀:
(1).::after參閱CSS E:after/E::after一章節。
(2).transform參閱CSS transform一章節。
(3).相對定位參閱CSS position:relative 相對定位一章節。
(4).絕對定位參閱CSS position:absolute 絕對定位一章節。
相關文章
- CSS3對勾效果詳解CSSS3
- CSS帶有箭頭的對話方塊效果CSS
- CSS:遮罩效果、陰影效果、毛玻璃效果CSS遮罩
- css文字兩端對齊效果相容各瀏覽器CSS瀏覽器
- excel中插入“對勾'和"叉子"的快捷鍵Excel
- CSS div居中效果CSS
- CSS 逐字高亮效果CSS
- css翻頁效果CSS
- CSS中的一下小技巧2之CSS3動畫勾選運用CSSS3動畫
- css 實現打分效果CSS
- CSS字串首字下沉效果CSS字串
- CSS3象棋效果CSSS3
- CSS細線表格效果CSS
- CSS 細線表格效果CSS
- CSS能做出的效果CSS
- 純CSS 毛玻璃效果CSS
- CSS3 文字效果CSSS3
- CSS 彎彎的月亮效果CSS
- CSS3空心圓效果CSSS3
- CSS3呼吸燈效果CSSS3
- 純css模擬下雪效果CSS
- CSS3 矩形切角效果CSSS3
- CSS實現鏤空效果CSS
- CSS圓形圖片效果CSS
- CSS 如何實現羽化效果?CSS
- CSS div居中效果程式碼CSS
- CSS3哭臉效果CSSS3
- css動態邊框效果CSS
- css立體按鈕效果CSS
- css氣泡聊天框效果CSS
- CSS 叉號按鈕效果CSS
- CSS3翻轉效果CSSS3
- CSS效果常見問題CSS
- div css背景漸變效果CSS
- css的常用效果總結CSS
- CSS數字分頁效果CSS
- css活用,半星星的效果CSS
- 純 CSS 實現波浪效果!CSS