css实现情侣骑电瓶车行驶loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现情侣骑电瓶车行驶loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        #loadingPage {
            position: fixed;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            background-color: #4e5ed0;
            z-index: 100;
        }

        #container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 74.5px;
            height: 40px;
        }

        .fade-transition {
            transition: all 0.3s ease;
        }

        .fade-enter, .fade-leave {
            opacity: 0;
        }

        .percentage {
            position: absolute;
            top: 60px;
            color: #c1c1c1;
            font-size: 0.24rem;
            width: 100%;
            text-align: center;
        }

        .a1 {
            animation: a_motor_man 0.5s linear infinite;
        }

        .mo-sprite, .mo-boy, .mo-girl, .mo-mo, .mo-wheel1, .mo-wheel2 {
            background-image: url("data:image/png;base64,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");
            background-repeat: no-repeat;
            background-size: 75px;
            position: absolute;
        }

        .mo-boy {
            background-position: 0 0;
            height: 68px;
            width: 32px;
            top: -34px;
            left: 28px;
            z-index: 4;
        }

        .mo-girl {
            background-position: 0 -69px;
            height: 70px;
            width: 30px;
            top: -37px;
            left: 7px;
            z-index: 5;
        }

        .mo-mo {
            background-position: 0 -138.5px;
            height: 40px;
            width: 75px;
            z-index: 3;
        }

        .mo-wheel1, .mo-wheel2 {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAMAAACfvvDEAAAAolBMVEUAAABXV1dYWFdzcnJeXl5YT0jMioKzs7NXV1ZVVFRVWF.........完整代码请登录后点击上方下载按钮下载查看