<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Apple手机开机动画</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 class="progress"></div>
</body>
</html>
