<!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>
苹果手机开机动画
猜你喜欢
转载自blog.csdn.net/qq_41880190/article/details/80369197
今日推荐
周排行