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 等。
当您使用这些代码添加对号或叉号的样式时,请根据您的具体需要进行微调。这些样式被设计为相对简单和易于理解,因此您可以在很短的时间内创建出具有最佳视觉效果的符号。