温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS如何实现loading动画效果

发布时间:2021-06-29 10:21:37 阅读:291 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍CSS如何实现loading动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

具体如下:

预览

CSS如何实现loading动画效果

代码

使用了CSS的keyframes自定义关键帧动画

<!DOCTYPE html>  
<html lang="en">  
    <head>
        <title>Loading</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            div#preload {
    margin: auto;
    position: fixed;
    width100%;
    height100%;
    background-color#fff;
    z-index9999999
}

div#preload>img {  
    position: absolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    -webkit-transformtranslate(-50%,-50%);
    -moz-transformtranslate(-50%,-50%);
    -ms-transformtranslate(-50%,-50%);
    -o-transformtranslate(-50%,-50%)
}

div#preload .cssload-loader {  
    position: absolute;
    left0;
    right0;
    margin: auto;
    width62px;
    height62px;
    top50%;
    margin-top: -31px;
    border-radius50%;
    -o-border-radius50%;
    -ms-border-radius50%;
    -webkit-border-radius50%;
    -moz-border-radius50%;
    perspective780px
}

div#preload .cssload-inner {  
    position: absolute;
    width100%;
    height100%;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius50%;
    -o-border-radius50%;
    -ms-border-radius50%;
    -webkit-border-radius50%;
    -moz-border-radius50%
}

div#preload .cssload-inner.cssload-one {  
    left0;
    top0;
    animation: cssload-rotate-one 1.15s linear infinite;
    -o-animation: cssload-rotate-one 1.15s linear infinite;
    -ms-animation: cssload-rotate-one 1.15s linear infinite;
    -webkit-animation: cssload-rotate-one 1.15s linear infinite;
    -moz-animation: cssload-rotate-one 1.15s linear infinite;
    border-bottom3px solid #000
}

div#preload .cssload-inner.cssload-two {  
    right0;
    top0;
    animation: cssload-rotate-two 1.15s linear infinite;
    -o-animation: cssload-rotate-two 1.15s linear infinite;
    -ms-animation: cssload-rotate-two 1.15s linear infinite;
    -webkit-animation: cssload-rotate-two 1.15s linear infinite;
    -moz-animation: cssload-rotate-two 1.15s linear infinite;
    border-right3px solid #000
}

div#preload .cssload-inner.cssload-three {  
    right0;
    bottom0;
    animation: cssload-rotate-three 1.15s linear infinite;
    -o-animation: cssload-rotate-three 1.15s linear infinite;
    -ms-animation: cssload-rotate-three 1.15s linear infinite;
    -webkit-animation: cssload-rotate-three 1.15s linear infinite;
    -moz-animation: cssload-rotate-three 1.15s linear infinite;
    border-top3px solid #000
}

@keyframes cssload-rotate-one {
    0% {
        transformrotateX(35degrotateY(-45degrotateZ(0deg)
    }

    100% {
        transformrotateX(35degrotateY(-45degrotateZ(360deg)
    }
}

@-o-keyframes cssload-rotate-one {
    0% {
        -o-transformrotateX(35degrotateY(-45degrotateZ(0deg)
    }

    100% {
        -o-transformrotateX(35degrotateY(-45degrotateZ(360deg)
    }
}

@-ms-keyframes cssload-rotate-one {
    0% {
        -ms-transformrotateX(35degrotateY(-45degrotateZ(0deg)
    }

    100% {
        -ms-transformrotateX(35degrotateY(-45degrotateZ(360deg)
    }
}

@-webkit-keyframes cssload-rotate-one {
    0% {
        -webkit-transformrotateX(35degrotateY(-45degrotateZ(0deg)
    }

    100% {
        -webkit-transformrotateX(35degrotateY(-45degrotateZ(360deg)
    }
}

@-moz-keyframes cssload-rotate-one {
    0% {
        -moz-transformrotateX(35degrotateY(-45degrotateZ(0deg)
    }

    100% {
        -moz-transformrotateX(35degrotateY(-45degrotateZ(360deg)
    }
}

@keyframes cssload-rotate-two {
    0% {
        transformrotateX(50degrotateY(10degrotateZ(0deg)
    }

    100% {
        transformrotateX(50degrotateY(10degrotateZ(360deg)
    }
}

@-o-keyframes cssload-rotate-two {
    0% {
        -o-transformrotateX(50degrotateY(10degrotateZ(0deg)
    }

    100% {
        -o-transformrotateX(50degrotateY(10degrotateZ(360deg)
    }
}

@-ms-keyframes cssload-rotate-two {
    0% {
        -ms-transformrotateX(50degrotateY(10degrotateZ(0deg)
    }

    100% {
        -ms-transformrotateX(50degrotateY(10degrotateZ(360deg)
    }
}

@-webkit-keyframes cssload-rotate-two {
    0% {
        -webkit-transformrotateX(50degrotateY(10degrotateZ(0deg)
    }

    100% {
        -webkit-transformrotateX(50degrotateY(10degrotateZ(360deg)
    }
}

@-moz-keyframes cssload-rotate-two {
    0% {
        -moz-transformrotateX(50degrotateY(10degrotateZ(0deg)
    }

    100% {
        -moz-transformrotateX(50degrotateY(10degrotateZ(360deg)
    }
}

@keyframes cssload-rotate-three {
    0% {
        transformrotateX(35degrotateY(55degrotateZ(0deg)
    }

    100% {
        transformrotateX(35degrotateY(55degrotateZ(360deg)
    }
}

@-o-keyframes cssload-rotate-three {
    0% {
        -o-transformrotateX(35degrotateY(55degrotateZ(0deg)
    }

    100% {
        -o-transformrotateX(35degrotateY(55degrotateZ(360deg)
    }
}

@-ms-keyframes cssload-rotate-three {
    0% {
        -ms-transformrotateX(35degrotateY(55degrotateZ(0deg)
    }

    100% {
        -ms-transformrotateX(35degrotateY(55degrotateZ(360deg)
    }
}

@-webkit-keyframes cssload-rotate-three {
    0% {
        -webkit-transformrotateX(35degrotateY(55degrotateZ(0deg)
    }

    100% {
        -webkit-transformrotateX(35degrotateY(55degrotateZ(360deg)
    }
}

@-moz-keyframes cssload-rotate-three {
    0% {
        -moz-transformrotateX(35degrotateY(55degrotateZ(0deg)
    }

    100% {
        -moz-transformrotateX(35degrotateY(55degrotateZ(360deg)
    }
}
        </style>
    </head>
    <body>
    <div id="preload">
                    <div class="cssload-loader">
                <div class="cssload-inner cssload-one"></div>
                <div class="cssload-inner cssload-two"></div>
                <div class="cssload-inner cssload-three"></div>
            </div>

    </div>
    </body>
</html>

以上是“CSS如何实现loading动画效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/587199.html

css
AI

开发者交流群×