【CSS】记录一些css用法

快速抖动

@keyframes shake { 
    10%, 90% { 
        transform: translate3d(-1px, 0, 0); 
    }
    20%, 80% { 
        transform: translate3d(2px, 0, 0); 
    }
    30%, 50%, 70% { 
        transform: translate3d(-4px, 0, 0); 
    }
    40%, 60% { 
        transform: translate3d(4px, 0, 0); 
    }
}
.apply-shake {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

<el-input v-model="shakeInput" :class="{'apply-shake': isShake}" style="width: 200px"></el-input> 
<el-button @click="onShakeSumbit" type="primary">确定</el-button>

onShakeSumbit(){
    if(this.shakeInput == ""){
        // 动态抖动
        this.isShake = true
        setTimeout(()=>{
            this.isShake = false
        }, 820)
        return; 
    }
}

超出一行省略

// 超出一行省略
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

超出两行（两行以上）省略

// 超出两行省略
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
// 超出行数
-webkit-line-clamp:2;