css 过渡transition

过渡transition

功能：
在规定的时间内，从一个值变化到另一个值。

transition-property:过渡属性的名称

transition-timing-function:过渡的速度

过渡速度取值：linear匀速

ease-in-out由慢到快再到慢

ease-in 由慢到快

ease-out 由快到慢

transition-duration: 过渡的时间

缩写方式：transition: all linear 1000ms

可以过渡的属性：颜色、尺寸、透明度。

过渡案例

1. 淡入淡出

/* 淡入淡出 方式1*/
section{
    width: 107px;
    height: 100px;
    background-size: 107px 100px;
    background-image: url("../img/2.png");
    transition: all linear 1000ms;
}

section:hover{
    background-image: url("../img/3.png");
}

相当于，当鼠标悬停，换一张背景图片。

2.图片移动

css部分：

/* 图片移动 图片用flex不会缩小 */
article{
    width: 107px;
    height: 107px;
    border: 1px solid red;
    display: flex;
       overflow: hidden;
}
img{
    transition:all linear 1000ms ;

}
article:hover img:nth-of-type(1){
    margin-left: -100%;
}

html部分：

<!-- 图片移动 -->
<article>
<img src="./img/2.png" alt="">
<img src="./img/3.png" alt="">

</article>

3.悬停，中间到两边下划线

html部分：

<!-- 文字下划线 -->
    <ul>
    <li><a href="">第一阶段</a>
    <li><a href="">第二阶段</a>
    <li><a href="">第三阶段</a>
    </ul>

css部分：

/* 鼠标悬停 下划线 */

li{
    list-style: none;
}
ul{
    width: 300px;
    height: 50px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
background-color: salmon;
}

li {
    background-color: skyblue;
    position: relative;
}
li::after{
    display: inline-block;
    content: "";
    border-bottom: 3px solid red;
    position: absolute;
    /* left:0; */
    left: 50%;
    top: 25px;
    width: 0;
    transition:all linear 1000ms ; 

} 

li:hover::after{
    /* left: 50%; */
    width: 100%;
    left: 0;
}