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

纯CSS实现的加载界面

2018-10-19 分类：教程 阅读(570) 评论(0)
web前端开发技术第一版答案
web前端开发技术 清华
新的前端开发技术

div+css实现的动态加载界面！
html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>无标题文档</title>
    <style>
        .container {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(#d6f7ff, #8eadff, #d6f7ff);
        }
        .load {
            position: fixed;
            width: 270px;
            height: 148px;
            top: 50%;
            left: 50%;
            margin-top: -74px;
            margin-left: -135px;
        }
        @keyframes piston {
            0%,
            100% {
                margin-top: 0
            }
            50% {
                margin-top: 50px
            }
        }
        @-webkit-keyframes piston {
            0%,
            100% {
                margin-top: 0
            }
            50% {
                margin-top: 50px
            }
        }
        @-webkit-keyframes arm {
            0%,
            100%,
            50% {
                -webkit-transform: rotate(0)
            }
            25% {
                -webkit-transform: rotate(-20deg)
            }
            75% {
                -webkit-transform: rotate(20deg)
            }
        }
        @keyframes arm {
            0%,
            100%,
            50% {
                transform: rotate(0)
            }
            25% {
                transform: rotate(-20deg)
            }
            75% {
                transform: rotate(20deg)
            }
        }
        .piston {
            float: left;
            margin-right: 10px;
            width: 60px;
            height: 150px;
            background: rgba(0, 0, 0, .1);
            border-radius: 10px 10px 50px 50px;
            box-shadow: 0 -4px 0 rgba(0, 0, 0, .2), 0 4px 0 rgba(255, 255, 255, .2)
        }
        .piston:last-child {
            margin: 0
        }
        .piston .block {
            position: relative;
            width: 60px;
            height: 36px;
            line-height: 36px;
            background: #476dd2;
            border-radius: 3px;
            text-align: center;
            color: white;
            font-size: 30px;
            font-weight: bold;
            -webkit-animation: piston 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
            animation: piston 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), inset 0 4px 0 rgba(255, 255, 255, .2)
        }
        .piston:nth-child(1) .block {
            -webkit-animation-delay: 0s;
            animation-delay: 0s
        }
        .piston:nth-child(2) .block {
            -webkit-animation-delay: .1s;
            animation-delay: .1s
        }
        .piston:nth-child(3) .block {
            -webkit-animation-delay: .2s;
            animation-delay: .2s
        }
        .piston:nth-child(4) .block {
            -webkit-animation-delay: .3s;
            animation-delay: .3s
        }
        .piston:nth-child(5) .block {
            -webkit-animation-delay: .4s;
            animation-delay: .4s
        }
        .piston .arm {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -5px 0 0 -5px;
            width: 10px;
            height: 86px;
            background: #476dd2;
            border-radius: 5px;
            box-shadow: inset 0 -11px 0 rgba(0, 0, 0, .2);
            z-index: -1;
            -webkit-transform-origin: center 10px;
            -webkit-animation: arm 1.2s linear infinite;
            -webkit-animation-delay: inherit;
            transform-origin: center 10px;
            animation: arm 1.2s linear infinite;
            animation-delay: inherit
        }
        .piston .arm:after,
        .piston .arm:before {
            content: ”;
            position: absolute;
            right: 0;
            left: 0;
            height: 6px;
            background: #eee;
            border-radius: 50%;
            margin: 2px
        }
        .piston .arm:before {
            top: 0
        }
        .piston .arm:after {
            bottom: 0
        }
        .piston .rotator {
            position: absolute;
            bottom: 0;
            width: 60px;
            height: 60px;
            border-radius: 10px;
            border-radius: 50%;
            border: 10px solid rgba(0, 0, 0, .1);
            box-sizing: border-box;
            z-index: -1
        }
    </style>
</head>
<body>
    <div class=”container”>
        <div class=”load”>
            <div class=”piston”>
                <div class=”rotator”></div>
                <div class=”block”>l
                    <div class=”arm”></div>
                </div>
            </div>
            <div class=”piston”>
                <div class=”rotator”></div>
                <div class=”block”>o
                    <div class=”arm”></div>
                </div>
            </div>
            <div class=”piston”>
                <div class=”rotator”></div>
                <div class=”block”>a
                    <div class=”arm”></div>
                </div>
            </div>
            <div class=”piston”>
                <div class=”rotator”></div>
                <div class=”block”>d
                    <div class=”arm”></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
技术部前端开发人员
web前端开发技术 储久良
web前端开发技术 聂常红 电子书
赞(0)
前端开发者 » 纯CSS实现的加载界面
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论