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>

3、源码：大数据

D178_AnimationWritingContinuely.html动画

D179_CloudAnimation.htmlui

地址:url

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

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大数据学习视频礼包