常用样式集锦

动画

hover

由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。

div{
    width: 100px;
    height: 100px;
    border:1px solid;
    margin:0px auto;
    margin-top: 200px;
}
            
div:hover{
    transform: scale(1.1); /* 改变大小 */
    transition: all 1s linear;
}

由于div元素只有在:hover伪类触发的时候，效果才能加到div元素上。

当鼠标离开div元素的时候，:hover伪类将不再生效，瞬间丢掉hover里写的动画效果。

此时，我们应当在原本元素上再写一个一模一样的transition效果，将离开断掉的动画效果续接上。

div{
    width: 100px;
    height: 100px;
    border:1px solid;
    margin:0px auto;
    margin-top: 200px;

    /* 在原本元素上再加一个transition */
    transition: all 1s linear;
}
div:hover{
    transform: scale(2);
    transition: all 1s linear;
}

此时，不管鼠标在什么时候离开元素，都会原样返回。

但此时会有一个问题，鼠标放上去，立马离开，或者鼠标从上边匀速划过，div回到原样的时间，依旧是1s。

其实，我们在hover里写的transition:all 1s linear完全是多余的。

transition有一个特性，只要是带有数值类型的属性（例如：% , rgba() , rgb() , hsla() , 数字等），在其发生变化的时候，均会被触发动画效果。

因此，不管:hover伪类什么时候丢掉我的动画，也不管我:hover时，元素动画走到了什么地步。只要元素本身带有transitioin，该动画便会从当前动画执行到的地方，以相同的时间返回原样。

div{
    width: 100px;
    height: 100px;
    border:1px solid;

    margin:0px auto;
    margin-top: 200px;

    /* 在此处留一个transition就够了 */
    transition: all 1s linear;
}
div:hover{
    transform: scale(2);
     /* 去掉这个tansition */
    /* transition:  all 1s linear; */
}

浏览器兼容性

transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */

Loading

免费的、开源的加载器和生成器

https://uiball.com/ldrs/

文本溢出省略

/* 单行文本溢出样式 */
.single-line-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 1.1rem;
}

/* 多行文本溢出样式 */
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

两端对齐

text-align: justify;

Flex

https://www.runoob.com/w3cnote/flex-grammar.html

flex-direction 属性

决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性

如果一条轴线排不下，如何换行 nowrap（默认）：不换行 wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方

justify-content属性

项目在主轴上的对齐方式。

justify-content:flex-start（默认值）：左对齐

justify-content: flex-end：右对齐

justify-content: center： 居中

justify-content: space-between

两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}