纯 CSS 3 动画实例－Loading 效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>loading</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        @keyframes loading {
            0% {
                background-position: -400px 0
            }

            100% {
                background-position: 400px 0
            }
        }
        .box1 {
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-left: -400px;
            top: 0;
            width: 800px;
            height: 60px;
            background-color: blue;
            background-image: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-name: loading;
            animation-timing-function: linear;
            transition: 0.3s;
        }
        .bgMasker {
            background-color: #fff;
        }

        .line1 {
            background-color: #fff;
            height: 20px;
            position: absolute;
            right: 0;
            top: 0;
            left: 60px;
        }

        .line2 {
            background-color: #fff;
            height: 20px;
            position: absolute;
            right: 700px;
            top: 20px;
            left: 60px;
        }
        .line3 {
            background-color: #fff;
            height: 20px;
            position: absolute;
            left: 400px;
            right: 0;
            top: 20px;
        }

        .line4 {
            background-color: #fff;
            height: 20px;
            top: 40px;
            position: absolute;
            left: 60px;
            right: 500px;
        }

        .line5 {
            background-color: #fff;
            height: 20px;
            position: absolute;
            left: 600px;
            right: 0;
            top: 40px;
        }
    </style>
</head>

<body>
    <!-- 骨架 -->
    <div class="box1">
        <div class="bgMasker line1"></div>
        <div class="bgMasker line2"></div>
        <div class="bgMasker line3"></div>
        <div class="bgMasker line4"></div>
        <div class="bgMasker line5"></div>
    </div>
</body>

</html>

@-webkit-keyframes 创建各阶段的效果，可以理解为帧
-webkit-animation 去响应上面动画。具有以下属性：
- -webkit-animation-name 动画名称，就是 -webkit-keyframes 中定义的。
- -webkit-animation-duration 完成一次动画所需时间。
- -webkit-animation-timing-function 速度。
- -webkit-animation-delay 动画开始前延迟。
- -webkit-animation-iteration-count 动画播放次数，默认为 1 ，infinite 无限。。
- -webkit-animation-direction normal 正常播放、alternate 在 1、3、5……正常播放，在 2、4、6……反向播放

纯 CSS 3 动画实例－Loading 效果

猜你喜欢