CSS学习笔记-过度模块-编写过渡效果

过渡模块-编写过渡效果：

1、编写过渡套路：
   1.1不要管过渡，先编写基本界面
   1.2修改我们认为需要修改的属性
   1.3再给被修改属性的元素添加过渡即可

2、弹性效果
   <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            background-color: red;
            font-size: 80px;
            margin: 200px auto;
            text-align: center;
        }
        div span{
            /*transition-property:margin;*/
            /*transition-duration:2s;*/
            transition:margin 2s ease 0s;
        }
        div:hover span{
            margin: 0 30px;
        }
    </style>

    <body>
        <div>
            <span>计</span>
            <span>算</span>
            <span>机</span>
            <span>科</span>
            <span>学</span>
            <span>与</span>
            <span>技</span>
            <span>术</span>
        </div>
    </body>

2、手风琴效果
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                border: 1px solid #000;
                margin: 300px auto;
                height: 500px;
                1800px;
                overflow: hidden;
            }
            ul li{
                list-style: none;
                height: 500px;
                300px;
                float: left;
                transition:width 0.5s;
            }
            ul li img{
                height: 500px;
            }
            ul:hover li{
                200px;
            }
            ul li:hover{
                800px;
            }
    </style>

    <body>
    <ul>
        <li><img src="images/手风琴/1.jpg" alt=""/></li>
        <li><img src="images/手风琴/3.jpg" alt=""/></li>
        <li><img src="images/手风琴/4.jpg" alt=""/></li>
        <li><img src="images/手风琴/2.jpg" alt=""/></li>
        <li><img src="images/手风琴/5.jpg" alt=""/></li>
        <li><img src="images/手风琴/6.jpg" alt=""/></li>
    </ul>
    </body>