css 中卡式选项图标

CSS中的卡式选项图标是一种常用的UI设计效果，它可以让网页具有更好的视觉效果和交互性。

.tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ccc;
}
.tab-item {
    position: relative;
    border-radius: 0.25rem 0.25rem 0 0;
    padding: 0.5rem;
    background-color: #fff;
    cursor: pointer;
}
.tab-item.active:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    background-color: #007aff;
}
.tab-item:hover:before {
    height: 0.125rem;
    transition: height 0.2s ease-in-out;
}
.tab-item.active .icon {
    color: #007aff;
}
.tab-item .icon {
    margin-right: 0.5rem;
    font-size: 1.25rem;
    color: #aaa;
}
    

在上面的代码中，我们首先定义了一个样式为.tab的容器，它含有一些样式属性用于控制选项卡的布局，并添加了一个灰色的底部边框。

接着，我们定义了.tab-item样式来包装每个选项卡，并添加了一些样式属性，如相对定位、圆角边框、背景色和鼠标指针样式。

我们使用伪元素:before来添加选项卡的底部条，它的高度在hover时会变得更短从而达到动态效果。

最后，我们添加了一个.icon样式来控制选项卡的图标，并在.active样式中改变其颜色。

通过这些CSS样式的组合，在网页中创建一个漂亮的卡式选项图标变得非常容易。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！