div+css实现情侣骑摩托车行驶loading加载动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:div+css实现情侣骑摩托车行驶loading加载动画效果代码

代码标签: div css 情侣 摩托车 行驶 loading 加载 动画

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

<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
   
#loadingPage {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #FFF;
    z-index: 100
}

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

.fade-transition {
    transition: all .3s ease
}

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

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

.a1 {
    animation: a_motor_man .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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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0