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

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

一、动画模块连写

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>

三、源码:

D178_AnimationWritingContinuely.html

D179_CloudAnimation.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D178_AnimationWritingContinuely.html

https://github.com/ruigege66/HTML_learning/blob/master/D179_CloudAnimation.html​

2.CSDN:https://blog.csdn.net/weixin_44630050

3.云海天:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包