CSS实现多屏动态变化展示

CoderChang

2018-02-20

CSS实现多屏动态变化展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        /**
 * Document defaults
 */
        body {
            text-align: center;
            background-color: #eee;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }


        /* The loader container */
        .loader {
            position: absolute;
            top: 50%;
            left: 50%;

            width: 200px;
            height: 200px;

            margin-top: -100px;
            margin-left: -100px;
        }


        /* The dot */
        .dot {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;

            width: 160px;
            height: 100px;

            margin-top: -50px;
            margin-left: -80px;

            border-radius: 5px;

            background-color: #1e3f57;

            transform-type: preserve-3d;

            animation: dot1 3s cubic-bezier(.55,.3,.24,.99) infinite;
        }

        .dot:nth-child(2) {
            z-index: 11;

            width: 150px;
            height: 90px;

            margin-top: -45px;
            margin-left: -75px;

            border-radius: 3px;

            background-color: #3c617d;

            animation-name: dot2;
        }

        .dot:nth-child(3) {
            z-index: 12;

            width: 40px;
            height: 20px;

            margin-top: 50px;
            margin-left: -20px;

            border-radius: 0 0 5px 5px;

            background-color: #6bb2cd;

            animation-name: dot3;
        }

        @keyframes dot1 {
            3%, 97% {
                width: 160px;
                height: 100px;

                margin-top: -50px;
                margin-left: -80px;
            }
            30%, 36% {
                width: 80px;
                height: 120px;

                margin-top: -60px;
                margin-left: -40px;
            }
            63%, 69% {
                width: 40px;
                height: 80px;

                margin-top: -40px;
                margin-left: -20px;
            }
        }

        @keyframes dot2 {
            3%, 97% {
                width: 150px;
                height: 90px;

                margin-top: -45px;
                margin-left: -75px;
            }
            30%, 36% {
                width: 70px;
                height: 96px;

                margin-top: -48px;
                margin-left: -35px;
            }
            63%, 69% {
                width: 32px;
                height: 60px;

                margin-top: -30px;
                margin-left: -16px;
            }
        }

        @keyframes dot3 {
            3%, 97% {
                width: 40px;
                height: 20px;

                margin-top: 50px;
                margin-left: -20px;
            }
            30%, 36% {
                width: 8px;
                height: 8px;

                margin-top: 49px;
                margin-left: -5px;

                border-radius: 8px;
            }
            63%, 69% {
                width: 16px;
                height: 4px;

                margin-top: -37px;
                margin-left: -8px;

                border-radius: 10px;
            }
        }
    </style>
</head>
<body>
<div class="loader">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
</body>
</html>

margin css