css 启动页 loading动画
<div class="index-html-loader">
<div class="text">Loading...</div>
<div class="horizontal">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesdwn">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="vertical">
<div class="circlesup">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="circlesdwn">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<style>
/* Start the loader code, first, let's align it the center of screen */
.index-html-loader {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-mos-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
/* disable selection and cursor changes */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
/* Text align it the center of screen and connect the looped animation for 2 seconds */
.index-html-loader .text {
position: absolute;
left: -1.3em;
top: -1.7em;
-webkit-animation: text 2s infinite;
-moz-animation: text 2s infinite;
-moz-animation: text 2s infinite;
-ms-animation: text 2s infinite;
-o-animation: text 2s infinite;
animation: text 2s infinite;
}
/* Set for the first layer vertical position */
.index-html-loader .vertical {
position: absolute;
top: -1.84em;
left: -0.4em;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/* Set for the second layer horizontal position */
.index-html-loader .horizontal {
position: absolute;
top: 0em;
left: 0em;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* The next two classes do mirror for animation */
.index-html-loader .circlesup {
position: absolute;
top: -4.7em;
right: 12.1em;
}
.index-html-loader .circlesdwn {
position: absolute;
top: 2.5em;
right: -13.5em;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* Create a container for our circles, rotate it 45 degrees and set animation*/
.index-html-loader .circle {
position: absolute;
width: 15em;
height: 15em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: orbit 2s infinite;
-moz-animation: orbit 2s infinite;
-moz-animation: orbit 2s infinite;
-ms-animation: orbit 2s infinite;
-o-animation: orbit 2s infinite;
animation: orbit 2s infinite;
z-index: 5;
}
/* Style's of our circles */
.index-html-loader .circle:after {
content: '';
position: absolute;
width: 2em;
height: 2em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
background: #13A3A5;
/* Pick a color 1*/
}
.index-html-loader .circle:nth-child(2) {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
-ms-animation-delay: 100ms;
-o-animation-delay: 100ms;
animation-delay: 100ms;
z-index: 4;
}
.index-html-loader .circle:nth-child(2):after {
background: #56bebf;
/* Pick a color 2*/
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
.index-html-loader .circle:nth-child(3) {
-webkit-animation-delay: 225ms;
-moz-animation-delay: 225ms;
-ms-animation-delay: 225ms;
-o-animation-delay: 225ms;
animation-delay: 225ms;
z-index: 3;
}
.index-html-loader .circle:nth-child(3):after {
background: #ffa489;
/* Pick a color 3*/
-webkit-transform: scale(0.6, 0.6);
-moz-transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-o-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6);
}
.index-html-loader .circle:nth-child(4) {
-webkit-animation-delay: 350ms;
-moz-animation-delay: 350ms;
-ms-animation-delay: 350ms;
-o-animation-delay: 350ms;
animation-delay: 350ms;
z-index: 2;
}
.index-html-loader .circle:nth-child(4):after {
background: #ff6d37;
/* Pick a color 4*/
-webkit-transform: scale(0.4, 0.4);
-moz-transform: scale(0.4, 0.4);
-ms-transform: scale(0.4, 0.4);
-o-transform: scale(0.4, 0.4);
transform: scale(0.4, 0.4);
}
.index-html-loader .circle:nth-child(5) {
-webkit-animation-delay: 475ms;
-moz-animation-delay: 475ms;
-ms-animation-delay: 475ms;
-o-animation-delay: 475ms;
animation-delay: 475ms;
z-index: 1;
}
.index-html-loader .circle:nth-child(5):after {
background: #DB2F00;
/* Pick a color 5*/
-webkit-transform: scale(0.2, 0.2);
-moz-transform: scale(0.2, 0.2);
-ms-transform: scale(0.2, 0.2);
-o-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
}
/* Animation keys */
@keyframes orbit {
0% {
transform: rotate(45deg);
}
5% {
transform: rotate(45deg);
animation-timing-function: ease-out;
}
70% {
transform: rotate(405deg);
animation-timing-function: ease-in;
}
100% {
transform: rotate(405deg);
}
}
@keyframes text {
0% {
transform: scale(0.2, 0.2);
animation-timing-function: ease-out;
}
50% {
transform: scale(1, 1);
animation-timing-function: ease-out;
}
60% {
transform: scale(1, 1);
animation-timing-function: ease-out;
}
100% {
transform: scale(0.2, 0.2);
}
}
</style>
css 启动页 loading动画的更多相关文章
- 纯css去实现loading动画效果图
当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...
- CSS制作简单loading动画
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- iOS关于启动页自定义特殊处理
平常开发中对于启动页可能会有一些特别的要求,比如在启动页加动画或加一些按键可以响应事件等,最近项目中要在启动页增加版本号,因为版本号是不断的改变,所以要动态实现把它加到启动页上:在XCode上面配置的 ...
- 教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift)
教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift) 一.前言 用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 在iOS中,在 ...
- electron-vue 项目添加启动loading动画问题
前言 electron-vue脚手架搭建的项目,在开发阶段可能你注意不到项目启动慢的问题,但是在build 生成的exe可执行文件,启动后,要反应很久才能进入到app.vue 中加载的页面,体验性很差 ...
- IOS启动页动画(uiview 淡入淡出效果 )2
Appdelegate里面右个这个函数,只要它没结束,你的等待界面就不会消失.以在启动的时候做些动画 - (BOOL)application:(UIApplication *)application ...
- 巧用 CSS 实现动态线条 Loading 动画
有群友问我,使用 CSS 如何实现如下 Loading 效果: 这是一个非常有意思的问题. 我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果: <div></div&g ...
- 页面预加载loading动画,再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
- 【IOS】模仿"抽屉新热榜"动态启动页YFSplashScreen
IOS最好要设置系统默认启动页面,不然进入应用就会突然闪现黑色画面 下图是我们要实现的效果: 总体思路:设置一个系统默认启动页面,在进入didFinishLaunchingWithOptions时, ...
随机推荐
- LG8768 题解
题意 传送门 求长度为 \(n\) 的序列 \(a\) 的个数对 \(998244353\) 取模的结果,其中 \(a\) 满足: \(a_1=w\) \(a_{i-1}+L\le a_i\le a_ ...
- Oracle查看用户占用的表空间大小
SELECT owner, tablespace_name, ROUND (SUM (BYTES) / 1024 / 1024, 2) "USED(M)" FROM dba_seg ...
- hostPath类型的卷挂载
卷类型之hostPath hostPath类型的卷可以把宿主机节点上的文件或文件夹挂载到pod中 先来看看hostPath类型的卷如何配置: apiVersion: v1 kind: Pod meta ...
- # huawei--流策略+NAT+单臂路由
huawei--流策略+NAT+单臂路由 项目要求: 公司内部有两个网段,分别为192.168.1.0/24和192.168.2.0/24,使用路由器R1实现单臂路由,并配置流策略,使192.168. ...
- JavaScript 静态方法
JavaScript 静态方法 静态方法是使用 static 关键字修饰的方法,又叫类方法,属于类的,但不属于对象,在实例化对象之前可以通过 类名.方法名 调用静态方法. 静态方法不能在对象上调用,只 ...
- JavaSE——金额转换
package com.zhao.stringtest; import java.util.Scanner; public class Test3 { //金额转换 //查表法 public stat ...
- 题解[LuoguP5591]小猪佩奇学数学
题解[LuoguP5591]小猪佩奇学数学 前置知识 基本数论推式子能力,如分配律结合律等 等比数列求和 \(\sum_{i=a}^bx^i=\dfrac{x^{b+1}-x^a}{x-1}\) 二项 ...
- C# 调用Web Api通用方法
1.通用方法 public class GetDataByWebApi { /// <summary> /// 通过web api获取数据的方法 /// </summary> ...
- dcat-admin在弹框中使用grid的编辑框不提示也不报错
显示效果 #版本:2.1.5-beta #点击编辑时没有反应,其实它已经把编辑框显示出来了,只是在当前这个弹框的后面,我们看不见,这样你可以在自己的项目中把弹框挪开或在F12中html搜索应该显示的代 ...
- ubuntu 20.04使用kubeadm安装k8s集群
本文主要用于记录,步骤参考了:https://blog.csdn.net/weixin_44559544/article/details/123381441 一.设备相关准备 1.修改节点主机名,这样 ...