CSS3 中的對號和叉號非常簡單易用,可以用于許多網站和應用程序中,增強用戶交互的可視化效果。
/* 對號 */ .tick { width: 20px; height: 20px; border-radius: 50%; background-color: green; transform: rotate(45deg); position: relative; } .tick:before { content: ''; position: absolute; top: 50%; left: 0; width: 5px; height: 10px; background-color: white; transform: translateY(-50%) rotate(-45deg); } .tick:after { content: ''; position: absolute; top: 0; right: 0; width: 5px; height: 10px; background-color: white; transform: rotate(-45deg); } /* 叉號 */ .cross { width: 20px; height: 20px; border-radius: 50%; background-color: red; position: relative; } .cross:before, .cross:after { content: ''; position: absolute; top: 50%; left: 0; width: 5px; height: 10px; background-color: white; transform: translateY(-50%) rotate(-45deg); } .cross:before { transform: translateY(-50%) rotate(45deg); } .cross:after { transform: rotate(45deg); }
以上代碼是用 CSS3 制作對號和叉號的樣式代碼,首先,我們需要使用偽元素 :before 和 :after,分別添加兩條豎線和一條斜線,來形成對號或叉號的外觀。所有的樣式都使用了常見的 CSS 屬性,例如 width、height、background-color、position、transform 和 border-radius 等。
當您使用這些代碼添加對號或叉號的樣式時,請根據您的具體需要進行微調。這些樣式被設計為相對簡單和易于理解,因此您可以在很短的時間內創建出具有最佳視覺效果的符號。
上一篇css3 字體隱藏
下一篇java尚學堂和優就業