CSS模仿加速球

2018-02-27 11:07:40来源: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>        #tout, html, body {            width: 100%;            height: 100%;        }        #tout {            position: relative;        }        #tout:first-child div {            display: block;            width: 100px;            height: 100px;            border: 2px solid #000;            border-radius: 50%;            position: absolute;            top: 0;            right: 0;            bottom: 0;            left: 0;            margin: auto;        }        #tout:first-child>div>div {            width: 90px;            height: 90px;            border: 5px solid #fff;            border-radius: 50%;            margin: auto;            overflow: hidden;        }        #tout:first-child div div div {            width: 110px;            height: 110px;            margin: auto;            top: 360px;            background-color: #ddd;            border-radius: 0%;            border: none;            animation-name: anim, color;            animation-duration: 5s;            animation-timing-function:ease;            animation-iteration-count:infinite;            animation-direction: alternate;        }        @keyframes anim{            100% { top:0 }        }        /* @keyframes color{          0%  { background-color: green; }          25%  { background-color: green; }          50% { background-color: red; }          75% { background-color: yellow; }          100% { background-color: blue; }        } */    </style></head><body><div >    <div>        <div>            <div>            </div>        </div>    </div></div></body></html>

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台