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

最新推荐文章于 2023-11-22 17:50:21 发布

睿里睿气

最新推荐文章于 2023-11-22 17:50:21 发布

阅读量191

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44630050/article/details/104725607

版权

HTML 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

一、动画模块连写
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>

73.1
二、云层图片
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>

73.2
三、源码：
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大数据学习视频礼包
73.3

睿里睿气

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML连载73-动画连写、图片连续变化

一、动画模块连写1.animation：动画名称动画时长动画运动速度延迟时间重复次数是否循环往复2.简写：animation:动画名称动画时长； <style> *{ padding:0; margin:0; } div{ w...
复制链接

扫一扫