HTML連載73-動畫連寫、圖片連續變化

時間 2020-03-08

標籤 html 連載動畫連寫圖片連續變化欄目 HTML 简体版

原文原文鏈接

1、動畫模塊連寫html

1.animation：動畫名稱動畫時長動畫運動速度延遲時間重複次數是否循環往復git

2.簡寫：animation:動畫名稱動畫時長；github

 

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width: 100px;

            height: 50px;

            background-color: red;

            animation:move 1s linear 1s 2 normal;

            /*動畫名稱 持續時間 運動速度  延遲時間  重複次數  是否循環往復*/

        }

        @keyframes move{

            from{

                margin-left:0;

            }

            to{

                margin-left:500px;

             }

        }

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

<div></div>

2、雲層圖片微信

1.注意點：（1）反向移動；（2）利用li的四倍距離，能充分得動覆蓋；（3）調整移動速度兩種：一種直接調整運動的速度，一種是移動的幅度，也是移動的距離；（4）顏色也能夠漸變。學習

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D179_CloudAnimation</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            height: 396px;

            background-color: skyblue;

            margin-top:100px;

            animation:change 5s linear 0s infinite alternate;/*infinite表明無限次的執行難下去*/

            position:relative;



        }

        ul li {

            width: 400%;/*複習了百分比的表示方式,這個四百很重要*/

            /*由於有三個li標籤，而且寬度變化最可能是三倍，所以，咱們的li須要有四倍，完成它的延展長度*/

            height: 350px;

            position:absolute;

            left:0;

            top:22px;

            list-style: none;





        }

        ul li:nth-child(1){

            background-image: url("image/play_tennis2.jpg");

            animation:one 10s linear 0s infinite alternate;

        }

        ul li:nth-child(2){

            background-image: url("image/play_tennis2.jpg");

            animation:two 10s linear 0s infinite alternate;

        }

        ul li:nth-child(3){

            background-image: url("image/play_tennis2.jpg");

            animation:three 10s linear 0s infinite alternate;

        }

        @keyframes change {

            form{

                background-color: skyblue;

            }

            to {

                background-color: grey;

            }

        }

        @keyframes one {

            from{

                margin-left:0;

            }

            to{

                margin-left:-100%;/*這裏都是反向移動也就是向左移動，若是向右移動，那麼左邊就會有空白出現了*/

            }

        }

        @keyframes two {

            from{

                margin-left:0;

            }

            to{

                margin-left:-200%;

            }

        }

        @keyframes three {

            from{

                margin-left:0;

            }

            to{

                margin-left:-300%;

            }

        }

</style>

</head>

<body>

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>