CSS學習筆記-過分模塊-編寫過渡效果

時間 2020-06-22

標籤 css 學習筆記過分模塊編寫過渡效果欄目 CSS 简体版

原文原文鏈接

過渡模塊-編寫過渡效果：

一、編寫過渡套路：
   1.1不要管過渡，先編寫基本界面
   1.2修改咱們認爲須要修改的屬性
   1.3再給被修改屬性的元素添加過渡便可

二、彈性效果
   <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>

二、手風琴效果
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                border: 1px solid #000;
                margin: 300px auto;
                height: 500px;
                width: 1800px;
                overflow: hidden;
            }
            ul li{
                list-style: none;
                height: 500px;
                width: 300px;
                float: left;
                transition:width 0.5s;
            }
            ul li img{
                height: 500px;
            }
            ul:hover li{
                width: 200px;
            }
            ul li:hover{
                width: 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>spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。