CSS模拟苹果重启界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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 class="progress"></div> </body> </html>
.