动画（1）

最新推荐文章于 2024-09-14 13:04:57 发布

one or two

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量40

点赞数

本文链接：https://blog.csdn.net/qq_41633396/article/details/117322651

版权

奔跑的少年的启示

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box1{
                width:256px;
                height:256px;
                margin:0px auto;
                background-image: url("../img/12/bg2.png");
                animation:running-man 0.5s steps(5) infinite;
            }
            
            @keyframes running-man {
                from{
                    background-position: 0px 0px;
                }

                to{
                    background-position: -1280px 0px;
                }
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>

在这里插入图片描述

注意上面一种设置方法

在这里插入图片描述

下面这种方法是利用，不给背景图片设置background-repeat:no-repeat;时的特点

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box1{
                width:256px;
                height:256px;
                margin:0px auto;
                background-image: url("../img/12/bg2.png");
                animation:running-man 0.5s steps(6) infinite;
            }
            
            @keyframes running-man {
                from{
                    background-position: 0px 0px;
                }

                to{
                    background-position: -1536px 0px;
                }
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>

在这里插入图片描述

上面第二种方法，之所以直接将to中的background-position的第一个参数设置为整张图片的大小，就在于，我没有在.box1中写background-repeat:no-repeat，并且让每一帧图片的宽度等于.box1的宽度，所以，造成了，我们实际看不见的背景图片的平铺，进一步，我们就可以不用计算，直接用整张图片来进行处理

跳球动画

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box1{
                width:800px;
                height:800px;
                border-bottom:10px black solid;
                margin:0px auto;
                overflow:hidden;
            }

            .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9{
                width:100px;
                height:100px;
                border-radius:50px;
                background-color:#bfa;
                animation:test 10s ease-in forwards;
                float:left;
            }

            .box{
                width:100px;
                height:100px;
                border-radius:50px;
                background-color:#bfa;
                animation:test 10s ease-in forwards infinite;
                float:left;
            }

            .box2{
                background-color:red;
                animation-delay:0.5s;
            }

            .box3{
                background-coloro:orange;
                animation-delay:1s;
            }

            .box4{
                background-color:yellow;
                animation-delay:1.5s;
            }

            .box5{
                background-color:green;
                animation-delay:2s;
            }

            .box6{
                background-color:cyan;
                animation-delay:2.5s;
            }

            .box7{
                background-color:blue;
                animation-delay:3s;
            }
            
            .box8{
                background-color:purple;
                animation-delay:3.5s;
            }

            .box9{
                background-color:pink;
                animation-delay:4s;
            }



            @keyframes test{
                0%{
                    margin-top:0px;
                }

                20%{
                    margin-top:700px;
                }

                40%{
                    margin-top:100px;
                }
                60%{
                    margin-top:700px;
                }
                80%{
                    margin-top:300px;
                }
                100%{
                    margin-top:700px;
                }
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2 box">2</div>
            <div class="box3 box">3</div>
            <div class="box4 box">4</div>
            <div class="box5 box">5</div>
            <div class="box6 box">6</div>
            <div class="box7 box">7</div>
            <div class="box8 box">8</div>
            <div class="box9 box">9</div>
        </div>
    </body>
</html>