CSS实现多屏动态变化展示

2018-02-27 11:07:51来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

CSS实现多屏动态变化展示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta 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 >    <div ></div>    <div ></div>    <div ></div></div></body></html>

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台