当先锋百科网

首页 1 2 3 4 5 6 7

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 等。

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