css-选中样式写法_css设置选中样式

<p style="font-weight:700;font-size:14px;padding:16px 0 12px">场景类型</p>
<span v-for="(item,index) in sceneData" :key="index">
    <span class="scene-item" 
          :class="{'selected':activeScene==index}"
          @click="handleSceneData(item,index)">{{index}}/span>
</span>

.scene-item {
            display: inline-block;
            margin: 0 15px 12px 0px;
            border-radius: 4px;
            height: 32px;
            line-height: 32px;
            border: 1px solid #ccc;
            padding: 0 16px;
            text-align: center;
            cursor: pointer;
            font-size: 13px;
        }
        .selected {
            position: relative;
            border: 1px solid #17b8be;
            color: #17b8be;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 0;
                border: 10px solid #17b8be;
                border-right: 10px solid transparent;
                border-bottom: 10px solid transparent;
                transition: opacity .3s;
            }
            &::after {
                content: "";
                width: 5px;
                height: 9px;
                border-right: 2px solid #fff;
                border-bottom: 2px solid #fff;
                position: absolute;
                top: 1px;
                left: 4px;
                transform: rotate(45deg);
            }
        }

备注：√的写法用到了transform的三大属性之一的rotate(旋转)

此处针对transform做一些学习

transform的三大属性：rotate、scale、translate

---

旋转：在参数中加入角度值，角度值后面加单位deg，旋转方向为顺时针方向

rotate(angle)：2D旋转，原点为基点，例如 transform：rotate(45deg)

rotateX(angle)：2D旋转，X轴为基点

rotateY(angle)：2D旋转，Y轴为基点

rotateZ(angle)：2D旋转，Z轴为基点

rotate3d(x,y,z,angle)：3D旋转

---

缩放：在参数中指定缩放倍率

transform：scale(0.5)； //缩小一半

transform：scale(0.5，2)； //水平方向缩小一半，垂直方向放大一倍

---

移动：在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离

transform：translate(50px,20px)； //水平方向上移动50px，垂直方向上移动20px

transform：translate(50px)； //水平方向上移动50px，垂直方向不移动