10-CSS3-过渡模块

作者: xiaohan_zhang | 来源:发表于2019-08-14 15:54 被阅读0次

10-CSS3-过渡模块
# 过渡模块transition
day21-CSS-动画模块
过渡模块
过渡模块
过渡模块
CSS过渡模块
CSS过渡模块
CSS3 特性
12-CSS过渡模块

过渡动画

过渡三要素
1.必须要有属性发生变化
2.告诉系统哪个属性需要执行过渡效果
3.必须知道过渡效果持续时长

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*告诉系统哪个属性需要执行过渡效果*/
            /*transition-property: width;*/
            /*多个属性执行动画效果*/
            transition-property: width, background-color;
            /*过渡效果持续时长*/
            /*transition-duration: 3s;*/
            transition-duration: 3s, 10s;
            /*连写*/
            /*transition: width 5s linear 2s;*/
        }
        div:hover{
            width: 200px;
            background-color: green;
        }
    </style>
<body>
    <div></div>
</body>

注：当多个属性需要动画效果时，用","隔开

transition-property: 需要过渡动画的属性
transition-duration: 过渡效果持续时长（秒）
transition-delay: 延迟开始过渡动画（秒）
transition-timing-function: 控制过渡动画的运动速度（linear/ease/ease-in/ease-out/ease-in-out）

过渡动画的运动速度示例：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 800px;
        height: 500px;
        margin: 0 auto;
        background-color: darkolivegreen;
        list-style: none;
        border: 1px solid #000;
    }
    li{
        width: 100px;
        height: 50px;
        margin-top: 50px;
        background-color: khaki;
        transition-property: margin-left;
        transition-duration: 10s;
    }
    /*鼠标悬停ul li标签移到右侧*/
    ul:hover li{
        margin-left: 700px;
    }
    /*控制过渡动画的运动速度*/
    ul li:nth-child(1){
        transition-timing-function: linear;
    }
    ul li:nth-child(2){
        transition-timing-function: ease;
    }
    ul li:nth-child(3){
        transition-timing-function: ease-in;
    }
    ul li:nth-child(4){
        transition-timing-function: ease-out;
    }
    ul li:nth-child(5){
        transition-timing-function: ease-in-out;
    }
</style>

<ul>
    <li>linear</li>
    <li>ease</li>
    <li>ease-in</li>
    <li>ease-out</li>
    <li>ease-in-out</li>
</ul>

过渡效果连写格式：
transition: property duration timing-function delay
transition: 过渡属性过渡时长过渡速度过渡延迟
transition: width 5s linear 2s,background-color 2s linear 0s;
所有属性相同的过渡效果：transition:all 5s;

弹性效果练习
编写过渡顺序：
1.1 不要管过渡，先编写基本界面
1.2 修改认为需要修改的属性
1.3 再回过头去给被修改属性的那个元素添加过渡效果即可

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100%;
        background-color: lemonchiffon;
        margin-top: 100px;
        text-align: center;
        line-height: 100px;
        padding-top: 10px;
    }
    div span{
        font-size: 80px;
        transition: margin 5s;
    }
    div:hover span{
        margin: 0 50px;
    }
</style>
<div>
    <span>嗯</span>
    <span>你</span>
    <span>是</span>
    <span>猪</span>
    <span>吗</span>
</div>

手风琴效果练习

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 960px;
        height: 291px;
        margin: 100px auto;
        border: 1px solid #000;
        overflow: hidden;
    }
    ul li{
        list-style: none;
        width: 160px;
        height: 291px;
        background-color: seagreen;
        float: left;
        transition: width 2s;
    }
    ul:hover li{
        width: 100px;
    }
    ul li:hover{
        width: 460px;
    }
</style>
<body>
    <ul>
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
        <li><img src="images/5.jpg" alt=""></li>
        <li><img src="images/6.jpg" alt=""></li>
    </ul>
</body>