记录自己常用的CSS技巧

单行文本溢出截断

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出隐藏

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

注意：使用padding会影响多行文本溢出隐藏

简单CSS往复动画

.test1{
    background: red;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    animation:move 9s linear infinite alternate;
}
@keyframes move{ 
    to{
        transform: translate(900%,0) rotate(3turn);
    }
}