html仿win10第一次开机效果,纯 HTML/CSS 高仿 Win10 加载动画

自己做的超高仿Win10加载动画(应该是全网最像的 HTML 实现了)，自己想用就拿去用吧

转圈加载

HTML:

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);

}

}

条形加载

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;

}