每日一练任务：CSS3预加载动画

Posted 2021-04-09 学大前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每日一练任务：CSS3预加载动画相关的知识，希望对你有一定的参考价值。

前言

学习前端开发，需要勤奋练习方可成就！学大前端微信平台开始每次推送：前端知识每日一练版块！希望大家能够每天坚持按照要求练习，对于提升你的技术能力，速度肯定是惊人的；如果此版块阅读、点赞及分享比较不错将继续进行，如果不理想说明大家不喜欢，将撤下此版块。

说明

有几天没推送每日一练了，有很多粉丝通过后台留言给我，希望平台继续坚持下去，自己通过练习学到了非常多的知识，能力也提示了不少。

主要是：阅读量及点赞蛮少的，我准备案例也挺辛苦的，数据不理想就没动力继续下去了。

今日任务

制作CSS3预加载动画特效，效果图如下所示：

动态效果图

在手机预览效果，识别以下二维码：

https://tycn.github.io/Practice/Lesson15-CSS3%E9%A2%84%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB/index.html

三不要

不要直接抄我的源码
不要只看不动手操作
不要辜负我对你的期望

源码参考

我自己写的，不会写的时候可以参考下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3预加载动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        #app{
            background-color: #000;
        }
        .loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }
        .loader-wrapper .loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #0D47A1;
            -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
            z-index: 1001;
        }
        .loader-wrapper .loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #E91E63;
            -webkit-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }
        .loader-wrapper .loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #E65100;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
            }
            @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .loader-wrapper .loader-left-wrapper,
        .loader-wrapper .loader-right-wrapper{
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background-color: #fff;
        }
        .loader-wrapper .loader-left-wrapper{
            left: 0;
        }
        .loader-wrapper .loader-right-wrapper{
            right: 0;
        }
        #app.loaded .loader-wrapper{
            transform: translateY(-100%);
            transition: transform 0s ease-in .5s;
        }
        #app.loaded .loader{
            display: none;
            transition: display 0s ease-in .25s;
        }
        #app.loaded .loader-left-wrapper{
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            transition: transform .5s ease-in;
        }
        #app.loaded .loader-right-wrapper{
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);
            transition: transform .5s ease-in;
        }
    </style>
</head>
<body>
    <body id="app">
    <embed src="http://yuntv.letv.com/bcloud.swf" allowFullScreen="true" quality="high" align="middle" allowScriptAccess="always" width="100%" height="100%" flashvars="uu=tgvfi4ll23&vu=137d4feab9&pu=dbe6274fd3&auto_play=1&gpcflag=1&width=1024&height=768&lang=zh_CN" type="application/x-shockwave-flash"></embed>
    <div class="loader-wrapper">
    <div class="loader"></div>
    <div class='loader-left-wrapper'></div>
    <div class='loader-right-wrapper'></div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script>
        $(function(){
        setTimeout(function(){
        $('#app').addClass("loaded");
        }, 3000);
        });
    </script>
</body>
</body>
</html>