HTML連載66-過分模塊的連寫、彈性效果

時間 2020-02-08

標籤 html 連載過分模塊連寫彈性效果欄目 HTML 简体版

原文原文鏈接

1、過渡模塊的連寫html

1.過渡連寫格式：git

過渡屬性過渡時長運動速度延遲時間；github

2.過渡連寫注意點：微信

（1）和分開寫同樣，若是想要多個屬性添加過渡效果，也是使用逗號來隔開便可。學習

（2）連寫的時候能夠省略後面的兩個參數，由於只要編寫了前面的兩個參數就已經知足了過渡的三要素。大數據

（3）若是多個屬性運動的速度/延遲的時間/持續的時間都同樣，那麼能夠簡寫爲ui

 

transition:all 0s

    <style>

        *{

            margin:0;

            padding:0;

        }

        div{

            width: 100px;

            height: 50px;

           

            /*transition-property: width;*/

            /*transition-duration: 5s;*/

            /*transition:width 1s linear 1s,background-color 2s linear 1s;*/

            transition:all 5s;

        }

        div:hover{

            width: 300px;

           

        }

.........省略代碼........

<div></div>

2、過渡模塊-彈性效果spa

1.編寫過的套路：.net

（1）不要管過渡，先編寫基本界面；（2）修改咱們認爲須要修改的屬性；（3）再回過頭來去給修改屬性的那個元素添加過渡便可。code

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D166_TransitionModuleElasticity</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        div{

            height: 100px;

           

            margin-top: 100px;

            text-align: center;

            line-height: 100px;

        }

        div span{

            font-size:80px;

            transition:all 2s;

        }

        div:hover span{

            margin:0 20px;

        }

</style>

</head>

<body>

<div>

    <span>自</span>

    <span>古</span>

    <span>逢</span>

    <span>秋</span>

    <span>悲</span>

    <span>寂</span>

    <span>廖</span>

</div>

</body>

</html>