用html和css写一个类似超级玛丽的动画效果

m0_67479358

于 2022-08-20 21:03:24 发布

阅读量235

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_67479358/article/details/126436375

版权

html部分

    
    <div class="box2"></div>
    <div class="star"></div>
    <div class="box3"></div>

CSS部分

 /* 奔跑的小人 */        
        .box2 {
            position: absolute;
            top: 400px;
            left: 0;
            width: 140px;
            height: 140px;
            background: url(./images/bg.png);
            background-size: cover;
            animation: run 1s steps(12) infinite, translate 4s linear forwards;
        }
        /* 触碰小人可以静止 */
        
        .box2:hover {
            animation-play-state: paused;
        }
        /* 小人奔跑动画 */
        
        @keyframes run {
            100% {
                background-position: -1680px 0;
            }
        }
        /* 小人位移动画 */
        
        @keyframes translate {
            22% {
                transform: translate(200px);
            }
            30% {
                transform: translate(240px, -140px);
            }
            33% {
                transform: translate(240px, -140px);
            }
            37% {
                transform: translate(280px);
            }
            100% {
                transform: translateX(1000px);
            }
        }
        /* 砖块盒子 */
        
        .box3 {
            position: absolute;
            left: 240px;
            top: 200px;
            width: 140px;
            height: 70px;
            background-color: rgb(122, 99, 57);
            border-radius: 20px;
            box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.3);
            /*注意计算延迟时间 */
            animation: box_move 0.3s 1.2s;
        }
        /* 砖块移动动画 */
        
        @keyframes box_move {
            50% {
                transform: translateY(-40px);
            }
        }
        /*星星盒子  */
        
        .star {
            position: absolute;
            left: 280px;
            top: 200px;
            width: 60px;
            height: 60px;
            background: url(./images/xingxing.png);
            background-size: cover;
            /* 注意延迟时间和砖块一致 */
            animation: star_move 2s 1.2s;
        }
        /* 星星移动动画 */
        
        @keyframes star_move {
            0% {
                opacity: 0;
            }
            20% {
                opacity: 1;
                transform: translateY(-100px);
            }
            100% {
                transform: translateY(-100px);
                opacity: 0;
            }
        }

实际效果

动画效果