自己做的超高仿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;

}

自定义动画(仿Win10加载动画)

一.源代码 源代码及demo 二.背景 先看看Win10的加载动画(找了很久才找到): CPA推广甲爪广告联盟满30日结 [点击进入] 甲爪广告联盟,提供各类高单价CPA广告 单价高 收益好 日付广告 ...

纯CSS3打造非常炫的加载动画

纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码:

iOS高仿app源码：纯代码打造高仿优质《内涵段子》

iOS高仿app源码:纯代码打造高仿优质收藏下来 字数1950 阅读4999 评论173 喜欢133 Github 地址 https://github.com/Charlesy ...

16款纯CSS3实现的loading加载动画

分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: