svgloader实现网页加载过渡动画效果代码-html代码-BFW代码库

svgloader实现网页加载过渡动画效果代码

代码语言：html

代码描述：svgloader实现网页加载过渡动画效果代码

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

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <style>

        .animated {

            -webkit-animation-duration: .5s;

            -moz-animation-duration: .5s;

            -o-animation-duration: .5s;

            animation-duration: .5s;

            -webkit-animation-fill-mode: both;

            -moz-animation-fill-mode: both;

            -o-animation-fill-mode: both;

            animation-fill-mode: both

        }

        .container {

            display: none;

        }

        .container.show {

            display: block;

        }

        /* 覆盖页面 */

        .pageload-overlay {

            position: fixed;

            width: 100%;

            height: 100%;

            top: 0;

            left: 0;

            visibility: hidden;

        }

        .pageload-overlay.show {

            visibility: visible;

        }

        .pageload-overlay svg {

            position: absolute;

            top: 0;

            left: 0;

            pointer-events: none;

        }

        .pageload-overlay svg path {

            fill: #fff;

        }

        .pageload-overlay::after,

        .pageload-overlay::before {

            content: '';

            position: fixed;

            width: 20px;

            height: 20px;

            top: 50%;

            left: 50%;

            margin: -10px 0 0 -10px;

            border-radius: 50%;

            visibility: hidden;

            opacity: 0;

            z-index: 1000;

            -webkit-transition: opacity 0.15s, visibility 0s 0.15s;

            transition: opacity 0.15s, visibility 0s 0.15s;

        }

        .pageload-overlay::after {

            background: #6cc88a;

            -webkit-transform: translateX(-20px);

            transform: translateX(-20px);

            -webkit-animation: moveRight 0.6s linear infinite alternate;

            animation: moveRight 0.6s linear infinite alternate;

        }

        .pageload-overlay::before {

            background: #4fc3f7;

            -webki.........完整代码请登录后点击上方下载按钮下载查看