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;

}

自定义动画(仿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 实现加载动画之五-光盘旋转

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

随机推荐

【vuejs小项目——vuejs2.0版本】单页面搭建

http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...

iOS开发之手势识别

感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...

VS2008切换设计视图卡死 停止响应

最近VS2008出现一个问题,打开项目后很快就非常慢,特别是切换设计视图马上卡死,很久也反应不过来.网上找了几种办法,都不好使,有的说是office影响的,有的说要改注册表,都试了一下,还是没用.后来 ...

SQL入门经典(十) 之事务

事务是什么?事务关键在与其原子性.原子性概念是指可以把一些事情当作一个执行单元来看待.从数据库角度看待.他是指应该全部执行或者全部不执行一条或多条语句的最小组合.当处理数据时候经常确保一件事发生另一件 ...

angularJs中的隐藏和显示

用Enterprise Architect从源码自动生成类图

http://blog.csdn.net/zhouyong0/article/details/8281192 /*references:感谢资源分享者.info:简单记录如何通过工具从源码生成类图,便 ...

ThinkPHP中ajax提交数据

最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了. 闲话少叙,进入正题:我需要从页面 ...