CSS模拟苹果重启界面
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>
.
相关推荐
Micusd 2020-11-19
liuxudong00 2020-11-19
星马殇 2020-11-18
章鱼之家 2020-10-29
leitingdulante 2020-10-21
88246630 2020-09-21
ZuoYanDeHuangHun 2020-09-18
bigname 2020-08-25
MatrixHero 2020-08-20
XxZproject 2020-08-10
定格 2020-08-15
panduola0 2020-08-05
ydc0 2020-07-30
quanhaoH 2020-07-31
yechen00 2020-07-25
是nsacer先森的 2020-07-02
ntfsformac 2020-06-23
longya 2020-06-22