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

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

代码语言：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,iVBORw0KGgoAAAANSUhEUgAAAJUAAAGNCAMAAAAvjsM/AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURQAAAKJ3d1lZWed5e21aW9evpnGixOmQR7W1tPqyeVJCNsTDw1tRSmlDJPGJhqmrrVNJQv7+/vGSeezRvd3EsunRv4C223R9g3KRprm+wdFTZ8m9tNBVZ00zH7CQh/1MTv7o11MyGEI/PY3J8up+kFhYWP+qZOJmelJRUXB+h0YoEvF5jcxYa/vk0u/Tve6Gl25tbUpJSPaUpMVMYKmlovjcyuVxhNdecppUX/SdVipfhGJGRZJxWGWIoNPR0PK9k5E3JNMAAAAgdFJOUwAN30wmJv3+/P6q/U/9e8KA/biD+bH8yIVReXK1yv37Swur8AAAENhJREFUeNrtnQtb2koTx7OQSIQQEIjc1IoFFSQBa4K1Uvz+3+rdezYXIMHD7j7v06FPj6a0/s5/ZmdndpPFMPaY6bTbdWTttmMaWpjZrjyLVqmrJ3OSSIzMAcJb2pVKXSaoyZhmwotwtYGo5OsrkAbVZkB5Nmub.........完整代码请登录后点击上方下载按钮下载查看