CSS模拟苹果重启界面

2018-02-27 11:07:16来源: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>        body {            background: #111 url("http://www.clipartbest.com/cliparts/Rcd/g5d/Rcdg5dXXi.png");            background-size: 25vmin;            background-repeat: no-repeat;            background-position: center 40%;            height: 100vh;            margin: 0;        }        .progress {            width: 400px;            max-width: 85vw;            height: 4px;            position: absolute;            bottom: 20vh;            left: 50%;            border-radius: 4px;            background: rgba(255,255,255,0.5);            transform: translate(-50%, -50%);            overflow: hidden;        }        .progress:after {            content: '';            display: block;            width: 100%;            height: 4px;            background: #fff;            animation: load 15s linear;        }        @-moz-keyframes load {            0% {                width: 0;            }            10% {                width: 5%;            }            20% {                width: 15%;            }            30% {                width: 25%;            }            40% {                width: 30%;            }            50% {                width: 44%;            }            60% {                width: 50%;            }            70% {                width: 72%;            }            80% {                width: 84%;            }            90% {                width: 92%;            }            100% {                width: 100%;            }        }        @-webkit-keyframes load {            0% {                width: 0;            }            10% {                width: 5%;            }            20% {                width: 15%;            }            30% {                width: 25%;            }            40% {                width: 30%;            }            50% {                width: 44%;            }            60% {                width: 50%;            }            70% {                width: 72%;            }            80% {                width: 84%;            }            90% {                width: 92%;            }            100% {                width: 100%;            }        }        @-o-keyframes load {            0% {                width: 0;            }            10% {                width: 5%;            }            20% {                width: 15%;            }            30% {                width: 25%;            }            40% {                width: 30%;            }            50% {                width: 44%;            }            60% {                width: 50%;            }            70% {                width: 72%;            }            80% {                width: 84%;            }            90% {                width: 92%;            }            100% {                width: 100%;            }        }        @keyframes load {            0% {                width: 0;            }            10% {                width: 5%;            }            20% {                width: 15%;            }            30% {                width: 25%;            }            40% {                width: 30%;            }            50% {                width: 44%;            }            60% {                width: 50%;            }            70% {                width: 72%;            }            80% {                width: 84%;            }            90% {                width: 92%;            }            100% {                width: 100%;            }        }    </style></head><body><div ></div></body></html>

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台