首页 > > 网页制作 > css >

HTML连载73-动画连写、图片连续变化

2020-03-08 16:00:32来源：博客园阅读 ()

一、动画模块连写

1.animation：动画名称动画时长动画运动速度延迟时间重复次数是否循环往复

2.简写：animation:动画名称动画时长；

 

    <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>

二、云层图片

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>