win10 html css,纯 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;

}

自定义动画(仿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代码:

为网格布局图片打造的超炫 CSS 加载动画

今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

CSS 实现加载动画之八-圆点旋转

这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

CSS 实现加载动画之七-彩环旋转

今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

CSS 实现加载动画之六-大风车

这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...

CSS 实现加载动画之五-光盘旋转

今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

随机推荐

struts2学习笔记--上传单个和批量文件示例

struts2提供了对上传文件的支持,将上传后的文件封装为java.io.File对象,开发者只需要在Action中定义一个File类型的变量,然后直接使用该变量,将它复制到目的目录即可. 单个文件上 ...

vmstat的使用(查看系统各种负载)

$ vmstatprocs -----------memory---------- ---swap-- -----io---- --system-- -----cpu------ r b swpd f ...

linux xargs参数

xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数据流分割为一些足够小的块,以方便过滤器和命令进行处理.通常情况下,xargs从管道或者stdin中读取数据,但是它也能够从 ...

C语言位运算符及作用：与、或、异或、取反、左移和右移

一.& 按位与 如果两个相应的二进制位都为1,则该位的结果值为1,否则为0应用:(1)清零 若想对一个存储单元清零,即使其全部二进制位为0,只要找一个二进制数,其中各个位符合一下条件:原来的数 ...

PYTHON ASYNCIO: FUTURE, TASK AND THE EVENT LOOP

from :http://masnun.com/2015/11/20/python-asyncio-future-task-and-the-event-loop.html Event Loop On ...

[Effective C++ --028]避免返回handles指向对象内部成分

假设程序涉及矩形.每个矩形由其左上角和右下角表示.为了让Rectangle对象尽可能小,可能把定义矩形的点放在一个辅助的struct内再让Rectangle去指它: class Point { // ...

Oracle系列之异常处理

涉及到表的处理请参看原表结构与数据  Oracle建表插数据等等 使用select into语句读取tb_Employee的一行,使用异常处理处理no_data_found和two_many_rows ...

最近找java实习面试被问到的东西总结(Java方向)

时间,就是这么很悄悄的溜走了将近两个年华,不知不觉的,研二了,作为一个一般学校的研究生,不知道该说自己是不学无术,还是说有过努力,反正,这两年里,有过坚持,有过堕落,这不,突然间,有种开窍的急迫感,寻 ...

golang 内存模型

1,是什么 是一套规范.内存操作指导 解决多线程编程的 程序的 原子性,有序性,可见性(主要)的问题. 多核操作系统,会存在缓存不一致的情况,说到底是一个同步的问题. 2, 内容 内存模型,除了定义了 ...

bzoj2208 连通数(bitset优化传递闭包)

题目链接 思路 floyd求一下传递闭包,然后统计每个点可以到达的点数. 会tle,用bitset优化一下.将floyd的最后一层枚举变成bitset. 代码 /* * @Author: wxyww ...