純 HTML/CSS 高仿 Win10 載入動畫
阿新 • • 發佈：2020-06-14
自己做的超高仿Win10載入動畫（應該是全網最像的 HTML 實現了），自己想用就拿去用吧
## 轉圈載入
[線上演示](http://jsrun.net/RXvKp/)
HTML:
```html
```
CSS:
```css
html,
body,
div{
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.loading {
width: 100%;
height: 100%;
background: #1E1E1E;
position: relative;
}
.loading i {
margin: auto;
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 40px);
width: 80px;
height: 80px;
display: block;
}
.loading span {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: i 5.5s infinite;
}
.loading span:after {
content: '';
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 10px;
background: #0078D7;
border-radius: 10px;
}
.loading span:nth-child(1) {
animation-delay: 0.18s;
}
.loading span:nth-child(2) {
animation-delay: 0.36s;
}
.loading span:nth-child(3) {
animation-delay: 0.54s;
}
.loading span:nth-child(4) {
animation-delay: 0.72s;
}
.loading span:nth-child(5) {
animation-delay: .90s;
}
.loading span:nth-child(6) {
animation-delay: 1.08s;
}
@keyframes i {
0% {
opacity: 1;
transform: rotate(180deg);
animation-timing-function: cubic-bezier(.29,.44,.32,.74);
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
}
30% {
opacity: 1;
transform: rotate(450deg);
animation-timing-function: cubic-bezier(.53,.27,.37,.81);
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
}
63% {
opacity: 1;
transform: rotate(800deg);
animation-timing-function: cubic-bezier(.5,.32,.82,.54);
}
68% {
opacity: 1;
transform: rotate(920deg);
animation-timing-function: ease-in;
}
69% {
opacity: 0;
transform: rotate(920deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
```
## 條形載入
[線上演示](http://jsrun.net/MXvKp/)
HTML:
```html
```
CSS:
```
@keyframes loader {
1% {
left: -10%;
opacity: 1;
}
60% {
left: 110%;
opacity: 1;
}
61% {
opacity: 0;
}
}
#preload {
z-index: 1000;
position: fixed;
width: 100%;
height: 100%;
background: #1E1E1E;
top: 0;
left: 0;
transition: opacity .3s;
}
#preload span {
display: block;
bottom: 45%;
height: 10px;
width: 10px;
position: fixed;
background: #0078D7;
z-index: 1001;
display: inline-block;
margin: 0 2px;
border-radius: 100%;
animation: loader 5s infinite cubic-bezier(0.030, 0.615, 0.995, 0.415);
transform: translate(-50%,-50%);
opacity: 0;
}
#preload span:nth-child(1) {
animation-delay: 0.5s;
}
#preload span:nth-child(2) {
animation-delay: 0.4s;
}
#preload span:nth-child(3) {
animation-delay: 0.3s;
}
#preload span:nth-child(4) {
animation-delay: 0.2s;
}
#preload span:nth-child(5) {
animation-delay: 0.1s;
}
#preload span:nth-child(6) {
animation-delay: 0;