弹跳的小球动画

最新推荐文章于 2023-06-04 23:19:05 发布

正在修炼web的小芮

最新推荐文章于 2023-06-04 23:19:05 发布

阅读量43

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125916193

版权

css3

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

创建盒子并链接图片

<body>
    <div id="wrap">
        <div class="tu1"><img src="./images/1.png" alt=""></div>
        <div class="tu2"><img src="./images/2.png" alt=""></div>
        <div class="tu3"><img src="./images/3.png" alt=""></div>
    </div>
</body>

写入css样式修饰

    <style>
        #wrap{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 580px;
            height: 143px;
            margin: auto;
        }
        #wrap img{
            width: 160px;
        }
        #wrap div{
            float: left;
            margin-right: 50px;
        }
        #wrap div:last-child{
            margin-right: 0;
        }
        .tu1,.tu2,.tu3{
            position: absolute;
            left: 50%;
            margin-left: -80px;
        }
        .tu1{
            z-index: 1;
            animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,leftMove 0.4s ease-out 1.2s 1 forwards,rotate 1s linear 1.6s infinite
        }
        .tu2{
            z-index: 2;
            animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,middle 0.4s ease-out 1.2s 1 forwards
        }
        .tu3{
            z-index: 3;
            animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,rightMove 0.4s ease-out 1.2s 1 forwards
        }
        @keyframes tiantiao1{
            0%{
                transform: translateY(-500px);
            }
            100%{
                transform: translateY(0);
            }
        }
        @keyframes tiantiao2{
            0%{
                transform: translateY(0);
            }
            100%{
                transform: translateY(-100px);
            } 
        }
        @keyframes tiantiao3{
            0%{
                transform: translateY(-100px);
            }
            100%{
                transform: translateY(0);
            } 
        }
        @keyframes tiantiao4{
            0%{
                transform: translateY(0);
            }
            100%{
                transform: translateY(-50px);
            } 
        }
        @keyframes tiantiao5{
            0%{
                transform: translateY(-50px);
            }
            100%{
                transform: translateY(0);
            } 
        }
        @keyframes leftMove{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(-300px) scale(1.6);
            }
        }
        @keyframes rightMove{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(300px) scale(1.6);
            }
        }
        @keyframes middle{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(0) scale(1.6);
            }
        }
    </style>

最终效果预览