前端开发入门效果分享_loding效果

0基础入门web前端开发|web前端开发初级入门|前端开发 项目描述

代码

<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>web前端开发师的前景:Loading</title>
    <link rel=”stylesheet” type=”text/css” href=”loading.css”>
    <style>
        .loader {
            float: left;
        }
        .loader {
            position: relative;
            width: 5rem;
            height: 5rem;
        }
        .loader.small {
            -webkit-transform: scale(.5);
            transform: scale(.5);
        }
        .loader.circle-line,
        .loader.circle-round {
            height: 5rem;
        }
        /*circle-line*/
        .loader.circle-line span {
            position: absolute;
            display: inline-block;
            width: 1.5rem;
            height: .5rem;
            border-top-left-radius: .25rem;
            border-bottom-left-radius: .25rem;
            background: #1ABC9C;
            opacity: .05;
            -webkit-animation: circle-line 1s ease infinite;
            animation: circle-line 1s ease infinite;
        }
        .loader.circle-line span:nth-child(1) {
            top: 50%;
            left: 0;
            margin-top: -.25rem;
            -webkit-animation-delay: .13s;
            animation-delay: .13s;
        }
        .loader.circle-line span:nth-child(2) {
            top: 1rem;
            left: .5rem;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-animation-delay: .26s;
            animation-delay: .26s;
        }
        .loader.circle-line span:nth-child(3) {
            left: 50%;
            top: .5rem;
            margin-left: -.75rem;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            -webkit-animation-delay: .39s;
            animation-delay: .39s;
        }
        .loader.circle-line span:nth-child(4) {
            right: .5rem;
            top: 1rem;
            -webkit-transform: rotate(145deg);
            transform: rotate(145deg);
            -webkit-animation-delay: .52s;
            animation-delay: .52s;
        }
        .loader.circle-line span:nth-child(5) {
            left: 3.5rem;
            top: 50%;
            margin-top: -.25rem;
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
            -webkit-animation-delay: .65s;
            animation-delay: .65s;
        }
        .loader.circle-line span:nth-child(6) {
            bottom: 1rem;
            right: .5rem;
            -webkit-transform: rotate(-145deg);
            transform: rotate(-145deg);
            -webkit-animation-delay: .78s;
            animation-delay: .78s;
        }
        .loader.circle-line span:nth-child(7) {
            left: 50%;
            bottom: .5rem;
            margin-left: -15px;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
            -webkit-animation-delay: .91s;
            animation-delay: .91s;
        }
        .loader.circle-line span:nth-child(8) {
            bottom: 1rem;
            left: .5rem;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-animation-delay: 1.04s;
            animation-delay: 1.04s;
        }
        @keyframes circle-line {
            0% {
                opacity: .05;
            }
            100% {
                opacity: .7;
            }
        }
        @-webkit-keyframes circle-line {
            0% {
                opacity: .05;
            }
            100% {
                opacity: .7;
            }
        }
        /*circle-line-spin*/
        .loader.circle-line-spin .circle-line-inner {
            width: 100%;
            height: 100%;
            -webkit-animation: circle-line-spin 1.5s linear infinite;
            animation: circle-line-spin 1.5s linear infinite;
        }
        .loader.circle-line-spin span {
            position: absolute;
            display: inline-block;
            width: 1.5rem;
            height: .5rem;
            border-top-left-radius: .25rem;
            border-bottom-left-radius: .25rem;
            background: #1ABC9C;
            opacity: .7;
        }
        .loader.circle-line-spin span:nth-child(1) {
            top: 50%;
            left: 0;
            margin-top: -.25rem;
        }
        .loader.circle-line-spin span:nth-child(2) {
            top: 1rem;
            left: .5rem;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .loader.circle-line-spin span:nth-child(3) {
            left: 50%;
            top: .5rem;
            margin-left: -.75rem;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        .loader.circle-line-spin span:nth-child(4) {
            right: .5rem;
            top: 1rem;
            -webkit-transform: rotate(145deg);
            transform: rotate(145deg);
        }
        .loader.circle-line-spin span:nth-child(5) {
            left: 3.5rem;
            top: 50%;
            margin-top: -.25rem;
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        .loader.circle-line-spin span:nth-child(6) {
            bottom: 1rem;
            right: .5rem;
            -webkit-transform: rotate(-145deg);
            transform: rotate(-145deg);
        }
        .loader.circle-line-spin span:nth-child(7) {
            left: 50%;
            bottom: .5rem;
            margin-left: -15px;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
        .loader.circle-line-spin span:nth-child(8) {
            bottom: 1rem;
            left: .5rem;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        @keyframes circle-line-spin {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes circle-line-spin {
            0% {
                -webkit-transform: rotate(0);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        /*circle-round*/
        .loader.circle-round span {
            opacity: .05;
            -webkit-animation: circle-round 1s ease infinite;
            animation: circle-round 1s ease infinite;
        }
        .loader.circle-round-fade span {
            -webkit-animation: circle-round-fade 1s ease infinite;
            animation: circle-round-fade 1s ease infinite;
        }
        .loader.circle-round span,
        .loader.circle-round-fade span {
            position: absolute;
            width: .8rem;
            height: .8rem;
            display: inline-block;
            border-radius: 50%;
            background: #1ABC9C;
        }
        .loader.circle-round span:nth-child(1),
        .loader.circle-round-fade span:nth-child(1) {
            top: 50%;
            left: 0;
            margin-top: -.4rem;
            -webkit-animation-delay: -1.04s;
            animation-delay: -1.04s;
        }
        .loader.circle-round span:nth-child(2),
        .loader.circle-round-fade span:nth-child(2) {
            top: .7rem;
            left: .7rem;
            -webkit-animation-delay: -.91s;
            animation-delay: -.91s;
        }
        .loader.circle-round span:nth-child(3),
        .loader.circle-round-fade span:nth-child(3) {
            top: 0;
            left: 50%;
            margin-left: -.4rem;
            -webkit-animation-delay: -.78s;
            animation-delay: -.78s;
        }
        .loader.circle-round span:nth-child(4),
        .loader.circle-round-fade span:nth-child(4) {
            right: .7rem;
            top: .7rem;
            -webkit-animation-delay: -.65s;
            animation-delay: -.65s;
        }
        .loader.circle-round span:nth-child(5),
        .loader.circle-round-fade span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -.4rem;
            -webkit-animation-delay: -.52s;
            animation-delay: -.52s;
        }
        .loader.circle-round span:nth-child(6),
        .loader.circle-round-fade span:nth-child(6) {
            bottom: .7rem;
            right: .7rem;
            -webkit-animation-delay: -.39s;
            animation-delay: -.39s;
        }
        .loader.circle-round span:nth-child(7),
        .loader.circle-round-fade span:nth-child(7) {
            bottom: 0;
            left: 50%;
            margin-left: -.4rem;
            -webkit-animation-delay: -.26s;
            animation-delay: -.26s;
        }
        .loader.circle-round span:nth-child(8),
        .loader.circle-round-fade span:nth-child(8) {
            left: .7rem;
            bottom: .7rem;
            -webkit-animation-delay: -.13s;
            animation-delay: -.13s;
        }
        @keyframes circle-round {
            0% {
                opacity: .05;
            }
            100% {
                opacity: .7;
            }
        }
        @-webkit-keyframes circle-round {
            0% {
                opacity: .05;
            }
            100% {
                opacity: .7;
            }
        }
        @keyframes circle-round-fade {
            0% {
                opacity: .25;
                transform: scale(.2);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        @-webkit-keyframes circle-round-fade {
            0% {
                opacity: .25;
                transform: scale(.2);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        /*line-square*/
        .loader.line-square {
            width: 6rem;
            height: .8rem;
        }
        .loader.line-square span {
            position: absolute;
            top: 0;
            width: .8rem;
            height: .8rem;
            display: inline-block;
            background: #1ABC9C;
            -webkit-animation: line-square 1s ease infinite;
            animation: line-square 1s ease infinite;
        }
        .loader.line-square span:nth-child(1) {
            left: 0;
            -webkit-animation-delay: .13s;
            animation-delay: .13s;
        }
        .loader.line-square span:nth-child(2) {
            left: 1.3rem;
            -webkit-animation-delay: .26s;
            animation-delay: .26s;
        }
        .loader.line-square span:nth-child(3) {
            left: 2.6rem;
            -webkit-animation-delay: .39s;
            animation-delay: .39s;
        }
        .loader.line-square span:nth-child(4) {
            left: 3.9rem;
            -webkit-animation-delay: .52s;
            animation-delay: .52s;
        }
        .loader.line-square span:nth-child(5) {
            left: 5.2rem;
            -webkit-animation-delay: .65s;
            animation-delay: .65s;
        }
        @keyframes line-square {
            0% {
                opacity: 1;
                transform: scale(1.2);
                -webkit-transform: scale(1.2);
            }
            100% {
                opacity: .2;
                transform: scale(.2);
                -webkit-transform: scale(.2);
            }
        }
        @-webkit-keyframes line-square {
            0% {
                opacity: 1;
                transform: scale(1.2);
                -webkit-transform: scale(1.2);
            }
            100% {
                opacity: .2;
                transform: scale(.2);
                -webkit-transform: scale(.2);
            }
        }
        /*line-round*/
        .loader.line-round {
            width: 6rem;
            height: .8rem;
        }
        .loader.line-round span {
            position: absolute;
            top: 0;
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            display: inline-block;
            background: #1ABC9C;
            -webkit-animation: line-round 1s ease infinite;
            animation: line-round 1s ease infinite;
        }
        .loader.line-round span:nth-child(1) {
            left: 0;
            -webkit-animation-delay: .13s;
            animation-delay: .13s;
        }
        .loader.line-round span:nth-child(2) {
            left: 1.3rem;
            -webkit-animation-delay: .26s;
            animation-delay: .26s;
        }
        .loader.line-round span:nth-child(3) {
            left: 2.6rem;
            -webkit-animation-delay: .39s;
            animation-delay: .39s;
        }
        .loader.line-round span:nth-child(4) {
            left: 3.9rem;
            -webkit-animation-delay: .52s;
            animation-delay: .52s;
        }
        .loader.line-round span:nth-child(5) {
            left: 5.2rem;
            -webkit-animation-delay: .65s;
            animation-delay: .65s;
        }
        @keyframes line-round {
            0% {
                opacity: 1;
                transform: scale(1.2);
                -webkit-transform: scale(1.2);
            }
            100% {
                opacity: .2;
                transform: scale(.2);
                -webkit-transform: scale(.2);
            }
        }
        @-webkit-keyframes line-round {
            0% {
                opacity: 1;
                transform: scale(1.2);
                -webkit-transform: scale(1.2);
            }
            100% {
                opacity: .2;
                transform: scale(.2);
                -webkit-transform: scale(.2);
            }
        }
        /*line-bounce*/
        .loader.line-bounce {
            width: 6rem;
            height: 2.5rem;
        }
        .loader.line-bounce span {
            position: absolute;
            top: 0;
            width: .5rem;
            height: 2.5rem;
            border-radius: 5px;
            display: inline-block;
            background: #1ABC9C;
            -webkit-animation: line-bounce 1s ease infinite;
            animation: line-bounce 1s ease infinite;
        }
        .loader.line-bounce span:nth-child(1) {
            left: 0;
            -webkit-animation-delay: -.65s;
            animation-delay: -.65s;
        }
        .loader.line-bounce span:nth-child(2) {
            left: 1.3rem;
            -webkit-animation-delay: -.78s;
            animation-delay: -.78s;
        }
        .loader.line-bounce span:nth-child(3) {
            left: 2.6rem;
            -webkit-animation-delay: -.91s;
            animation-delay: -.91s;
        }
        .loader.line-bounce span:nth-child(4) {
            left: 3.9rem;
            -webkit-animation-delay: -.78s;
            animation-delay: -78s;
        }
        .loader.line-bounce span:nth-child(5) {
            left: 5.2rem;
            -webkit-animation-delay: -.65s;
            animation-delay: -.65s;
        }
        @keyframes line-bounce {
            0% {
                transform: scaleY(1);
            }
            50% {
                transform: scaleY(.3);
            }
            100% {
                transform: scaleY(1);
            }
        }
        @-webkit-keyframes line-bounce {
            0% {
                -webkit-transform: scaleY(1);
            }
            50% {
                -webkit-transform: scaleY(.3);
            }
            100% {
                -webkit-transform: scaleY(1);
            }
        }
        /*circle-spin*/
        .loader.circle-spin {
            border-radius: 50%;
            border: .2rem solid rgba(0, 0, 0, .05);
            width: 4rem;
            height: 4rem;
            box-sizing: content-box;
        }
        .loader.circle-spin .loader-placeholder {
            position: absolute;
            top: -.2rem;
            left: -.2rem;
            border-radius: 50%;
            border: .2rem solid transparent;
            border-top: .2rem solid #1ABC9C;
            width: 4rem;
            height: 4rem;
            box-sizing: content-box;
            -webkit-animation: circle-spin 1s ease infinite;
            animation: circle-spin 1s ease infinite;
        }
        @keyframes circle-spin {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes circle-spin {
            0% {
                -webkit-transform: rotate(0);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class=”loading”>
        <div class=”loader circle-line small”>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class=”loader circle-line-spin small”>
            <div class=”circle-line-inner”>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class=”loader circle-round small”>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class=”loader circle-round-fade small”>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class=”loader line-square small”>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class=”loader line-round small”>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class=”loader line-bounce small”>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class=”loader circle-spin small”>
            <div class=”loader-placeholder”></div>
        </div>
    </div>
</body>
</html>

前端开发方向发展前景|前端融资和开发贷区别吗?|web前端开发的简介和前景

» 本文来自:前端开发者 » 《前端开发入门效果分享_loding效果》
» 本文链接地址:https://www.rokub.com/4089.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!