找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3 loading动画

2018-10-17 分类：CSS 阅读(782) 评论(0)
深圳web前端开发招聘
深圳招聘web前端开发
萍乡前端开发招聘

2、
html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>loading动画</title>
    <h3>loading动画5</h3>
    <style>
        h3 {
            text-align: center;
        }
        .loading-demo5 {
            margin: 60px auto;
            width: 70px;
            text-align: center;
        }
        .loading-demo5>div {
            width: 18px;
            height: 18px;
            background-color: #09c;
            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            /* Prevent first frame from flickering when animation starts */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .loading-demo5 .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }
        .loading-demo5 .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }
        @-webkit-keyframes bouncedelay {
            0%,
            80%,
            100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }
        @keyframes bouncedelay {
            0%,
            80%,
            100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
    <div class=”loading-demo5″>
        <div class=”bounce1″></div>
        <div class=”bounce2″></div>
        <div class=”bounce3″></div>
    </div>
    </body>
</html>

3、
html 代码

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>loading动画</title>
    <h3>loading动画6</h3>
    <style>
        h3 {
            text-align: center;
        }
        .loading-demo6 {
            margin: 60px auto;
            width: 60px;
            height: 60px;
            position: relative;
        }
        .container1>div,
        .container2>div,
        .container3>div {
            width: 18px;
            height: 18px;
            background-color: #09c;
            border-radius: 100%;
            position: absolute;
            -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
            animation: bouncedelay 1.2s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .loading-demo6 .loading-demo6-container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .container2 {
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }
        .container3 {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
        .circle1 {
            top: 0;
            left: 0;
        }
        .circle2 {
            top: 0;
            right: 0;
        }
        .circle3 {
            right: 0;
            bottom: 0;
        }
        .circle4 {
            left: 0;
            bottom: 0;
        }
        .container2 .circle1 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }
        .container3 .circle1 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }
        .container1 .circle2 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
        .container2 .circle2 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }
        .container3 .circle2 {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }
        .container1 .circle3 {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
        .container2 .circle3 {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }
        .container3 .circle3 {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }
        .container1 .circle4 {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }
        .container2 .circle4 {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }
        .container3 .circle4 {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }
        @-webkit-keyframes bouncedelay {
            0%,
            80%,
            100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }
        @keyframes bouncedelay {
            0%,
            80%,
            100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
    <div class=”loading-demo6″>
        <div class=”loading-demo6-container container1″>
            <div class=”circle1″></div>
            <div class=”circle2″></div>
            <div class=”circle3″></div>
            <div class=”circle4″></div>
        </div>
        <div class=”loading-demo6-container container2″>
            <div class=”circle1″></div>
            <div class=”circle2″></div>
            <div class=”circle3″></div>
            <div class=”circle4″></div>
        </div>
        <div class=”loading-demo6-container container3″>
            <div class=”circle1″></div>
            <div class=”circle2″></div>
            <div class=”circle3″></div>
            <div class=”circle4″></div>
        </div>
    </div>
    </body>
</html>

96、
html 代码

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>loading动画</title>
    <h3>loading动画4</h3>
    <style>
        h3 {
            text-align: center;
        }
        .loading-demo4 {
            margin: 60px auto;
            width: 60px;
            height: 60px;
            position: relative;
            text-align: center;
            -webkit-animation: rotate 2.0s infinite linear;
            animation: rotate 2.0s infinite linear;
        }
        .dot1,
        .dot2 {
            width: 60%;
            height: 60%;
            display: inline-block;
            position: absolute;
            top: 0;
            background-color: #09c;
            border-radius: 100%;
            -webkit-animation: bounce 2.0s infinite ease-in-out;
            animation: bounce 2.0s infinite ease-in-out;
        }
        .dot2 {
            top: auto;
            bottom: 0px;
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }
        @-webkit-keyframes rotate {
            100% {
                -webkit-transform: rotate(360deg)
            }
        }
        @keyframes rotate {
            100% {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes bounce {
            0%,
            100% {
                -webkit-transform: scale(0.0)
            }
            50% {
                -webkit-transform: scale(1.0)
            }
        }
        @keyframes bounce {
            0%,
            100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
    <div class=”loading-demo4″>
        <div class=”dot1″></div>
        <div class=”dot2″></div>
    </div>
    </body>
</html>

97、
html 代码

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>loading动画</title>
    <h3>loading动画3</h3>
    <style>
        h3 {
            text-align: center;
        }
        .loading-demo3 {
            width: 30px;
            height: 30px;
            background-color: #09c;
            margin: 100px auto;
            -webkit-animation: rotateplane 1.2s infinite ease-in-out;
            animation: rotateplane 1.2s infinite ease-in-out;
        }
        @-webkit-keyframes rotateplane {
            0% {
                -webkit-transform: perspective(120px)
            }
            50% {
                -webkit-transform: perspective(120px) rotateY(180deg)
            }
            100% {
                -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
            }
        }
        @keyframes rotateplane {
            0% {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            }
            100% {
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }
    </style>
    <div class=”loading-demo3″></div>
    </body>
</html>

98、
html 代码

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>loading动画</title>
    <h3>loading动画3</h3>
    <style>
        h3 {
            text-align: center;
        }
        .loading-demo3 {
            width: 30px;
            height: 30px;
            background-color: #09c;
            margin: 100px auto;
            -webkit-animation: rotateplane 1.2s infinite ease-in-out;
            animation: rotateplane 1.2s infinite ease-in-out;
        }
        @-webkit-keyframes rotateplane {
            0% {
                -webkit-transform: perspective(120px)
            }
            50% {
                -webkit-transform: perspective(120px) rotateY(180deg)
            }
            100% {
                -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
            }
        }
        @keyframes rotateplane {
            0% {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            }
            100% {
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }
    </style>
    <div class=”loading-demo3″></div>
    </body>
</html>

99、
html 代码

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>loading动画</title>
    <h3>loading动画2</h3>
    <style>
        h3 {
            text-align: center;
        }
        .loading-demo2 {
            margin: 100px auto;
            width: 32px;
            height: 32px;
            position: relative;
        }
        .cube1,
        .cube2 {
            background-color: #09c;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: cubemove 2s infinite ease-in-out;
            animation: cubemove 2s infinite ease-in-out;
        }
        .cube2 {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }
        @-webkit-keyframes cubemove {
            25% {
                -webkit-transform: translateX(22px) rotate(-90deg) scale(0.5)
            }
            50% {
                -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg)
            }
            75% {
                -webkit-transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5)
            }
            100% {
                -webkit-transform: rotate(-360deg)
            }
        }
        @keyframes cubemove {
            25% {
                transform: translateX(42px) rotate(-90deg) scale(0.5);
                -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
            }
            50% {
                /* Hack to make FF rotate in the right direction */
                transform: translateX(42px) translateY(42px) rotate(-179deg);
                -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
            }
            50.1% {
                transform: translateX(42px) translateY(42px) rotate(-180deg);
                -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
            }
            75% {
                transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
                -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
            }
            100% {
                transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
            }
        }
    </style>
    <div class=”loading-demo2″>
        <div class=”cube1″></div>
        <div class=”cube2″></div>
    </div>
    </body>
</html>

100、
html 代码

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>蓝色系loading动画</title>
    <h3>loading动画1</h3>
    <style>
        h3 {
            text-align: center;
        }
        .loading-demo1 {
            width: 60px;
            height: 60px;
            position: relative;
            margin: 60px auto;
        }
        .round1,
        .round2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #09c;
            opacity: .6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: loading 2s infinite ease-in-out;
            -moz-animation: loading 2s infinite ease-in-out;
            animation: loading 2s infinite ease-in-out;
        }
        .round2 {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }
        @-webkit-keyframes loading {
            0%,
            100% {
                -webkit-transform: scale(0.0)
            }
            50% {
                -webkit-transform: scale(1.0)
            }
        }
        @-moz-keyframes loading {
            0%,
            100% {
                -webkit-transform: scale(0.0)
            }
            50% {
                -webkit-transform: scale(1.0)
            }
        }
        @keyframes loading {
            0%,
            100% {
                -webkit-transform: scale(0.0)
            }
            50% {
                -webkit-transform: scale(1.0)
            }
        }
    </style>
</head>
<body>
    <div class=”loading-demo1″>
        <div class=”round1″></div>
        <div class=”round2″></div>
    </div>
</body>
</html>
php前端开发助理招聘要求
h5前端开发 招聘
小程序前端开发招聘
赞(0)
前端开发者 » 前端开发CSS3 loading动画
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论