loading 动画效果（收藏起来以后留着慢慢用）

动画效果一：

html代码：

<div class="spinner">

<div class="rect1"></div>

<div class="rect2"></div>

<div class="rect3"></div>

<div class="rect4"></div>

<div class="rect5"></div>

</div>

CSS代码：

.spinner {

margin: 100px auto;

width: 50px;

height: 60px;

text-align: center;

font-size: 10px;

}

.spinner > div {

background-color: #67CF22;

height: 100%;

width: 6px;

display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}

.spinner .rect2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.spinner .rect3 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.spinner .rect4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.spinner .rect5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

} 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

动画效果二：

HTML代码：

<div class="spinner"></div>

CSS代码：

.spinner {

width: 60px;

height: 60px;

background-color: #67CF22;

margin: 100px auto;

-webkit-animation: rotateplane 1.2s infinite ease-in-out;

animation: rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

0% { -webkit-transform: perspective(120px) }

50% { -webkit-transform: perspective(120px) rotateY(180deg) }

100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }

}

@keyframes rotateplane {

0% {

transform: perspective(120px) rotateX(0deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

} 50% {

transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

} 100% {

transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

}

动画效果三：

HTML代码：

<div class="spinner">

<div class="double-bounce1"></div>

<div class="double-bounce2"></div>

</div>

CSS代码：

.spinner {

width: 60px;

height: 60px;

position: relative;

margin: 100px auto;

}

.double-bounce1, .double-bounce2 {

width: 100%;

height: 100%;

border-radius: 50%;

background-color: #67CF22;

opacity: 0.6;

position: absolute;

top: 0;

left: 0;

-webkit-animation: bounce 2.0s infinite ease-in-out;

animation: bounce 2.0s infinite ease-in-out;

}

.double-bounce2 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

@-webkit-keyframes bounce {

0%, 100% { -webkit-transform: scale(0.0) }

50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

0%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 50% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

动画效果四：

HTML代码：

<div class="spinner">

<div class="cube1"></div>

<div class="cube2"></div>

</div>

CSS代码：

.spinner {

margin: 100px auto;

width: 32px;

height: 32px;

position: relative;

}

.cube1, .cube2 {

background-color: #67CF22;

width: 30px;

height: 30px;

position: absolute;

top: 0;

left: 0;

-webkit-animation: cubemove 1.8s infinite ease-in-out;

animation: cubemove 1.8s infinite ease-in-out;

}

.cube2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

@-webkit-keyframes cubemove {

25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

100% { -webkit-transform: rotate(-360deg) }

}

@keyframes cubemove {

25% {

transform: translateX(42px) rotate(-90deg) scale(0.5);

-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

} 50% {

transform: translateX(42px) translateY(42px) rotate(-179deg);

-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

} 50.1% {

transform: translateX(42px) translateY(42px) rotate(-180deg);

-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

} 75% {

transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

} 100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

}

动画效果五：

HTML代码：

<div class="spinner">

<div class="dot1"></div>

<div class="dot2"></div>

</div>

CSS代码：

.spinner {

margin: 100px auto;

width: 90px;

height: 90px;

position: relative;

text-align: center;

-webkit-animation: rotate 2.0s infinite linear;

animation: rotate 2.0s infinite linear;

}

.dot1, .dot2 {

width: 60%;

height: 60%;

display: inline-block;

position: absolute;

top: 0;

background-color: #67CF22;

border-radius: 100%;

-webkit-animation: bounce 2.0s infinite ease-in-out;

animation: bounce 2.0s infinite ease-in-out;

}

.dot2 {

top: auto;

bottom: 0px;

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}

@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes bounce {

0%, 100% { -webkit-transform: scale(0.0) }

50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

0%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 50% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

动画效果六：

HTML代码：

<div class="spinner">

<div class="bounce1"></div>

<div class="bounce2"></div>

<div class="bounce3"></div>

</div>

CSS代码：

.spinner {

margin: 100px auto 0;

width: 150px;

text-align: center;

}

.spinner > div {

width: 30px;

height: 30px;

background-color: #67CF22;

border-radius: 100%;

display: inline-block;

-webkit-animation: bouncedelay 1.4s infinite ease-in-out;

animation: bouncedelay 1.4s infinite ease-in-out;

/* Prevent first frame from flickering when animation starts */

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.spinner .bounce1 {

-webkit-animation-delay: -0.32s;

animation-delay: -0.32s;

}

.spinner .bounce2 {

-webkit-animation-delay: -0.16s;

animation-delay: -0.16s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0.0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

动画效果七：

HTML代码：

<div class="spinner"></div>

CSS代码：

.spinner {

width: 40px;

height: 40px;

margin: 100px auto;

background-color: #333;

border-radius: 100%;

-webkit-animation: scaleout 1.0s infinite ease-in-out;

animation: scaleout 1.0s infinite ease-in-out;

}

@-webkit-keyframes scaleout {

0% { -webkit-transform: scale(0.0) }

100% {

-webkit-transform: scale(1.0);

opacity: 0;

}

@keyframes scaleout {

0% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 100% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

opacity: 0;

}

动画效果八：

HTML代码：

<div class="spinner">

<div class="spinner-container container1">

<div class="circle1"></div>

<div class="circle2"></div>

<div class="circle3"></div>

<div class="circle4"></div>

</div>

<div class="spinner-container container2">

<div class="circle1"></div>

<div class="circle2"></div>

<div class="circle3"></div>

<div class="circle4"></div>

</div>

<div class="spinner-container container3">

<div class="circle1"></div>

<div class="circle2"></div>

<div class="circle3"></div>

<div class="circle4"></div>

</div>

CSS代码：

.spinner {

margin: 100px auto;

width: 20px;

height: 20px;

position: relative;

}

.container1 > div, .container2 > div, .container3 > div {

width: 6px;

height: 6px;

background-color: #333;

border-radius: 100%;

position: absolute;

-webkit-animation: bouncedelay 1.2s infinite ease-in-out;

animation: bouncedelay 1.2s infinite ease-in-out;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.spinner .spinner-container {

position: absolute;

width: 100%;

height: 100%;

}

.container2 {

-webkit-transform: rotateZ(45deg);

transform: rotateZ(45deg);

}

.container3 {

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

}

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.container3 .circle1 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.container1 .circle2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.container2 .circle2 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.container3 .circle2 {

-webkit-animation-delay: -0.7s;

animation-delay: -0.7s;

}

.container1 .circle3 {

-webkit-animation-delay: -0.6s;

animation-delay: -0.6s;

}

.container2 .circle3 {

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.container3 .circle3 {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.container1 .circle4 {

-webkit-animation-delay: -0.3s;

animation-delay: -0.3s;

}

.container2 .circle4 {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

}

.container3 .circle4 {

-webkit-animation-delay: -0.1s;

animation-delay: -0.1s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0.0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

loading 动画效果（收藏起来以后留着慢慢用）的更多相关文章

实现loading动画效果
下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...
ios开发之简单实现loading动画效果
最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...
Atitit Loading 动画效果
Atitit Loading 动画效果使用才场景,加载数据,以及显示警告灯.. 要有手动关闭按钮 <div class="spinner loading_part" sty ...
[Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
loading动画效果记录
看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...
android动画介绍--Animation 实现loading动画效果
Animation的使用方法并不难.这里简单的介绍一下使用方法. 先看效果图: 效果还是不错的吧. 下面来看看使用方法. 动画效果是通过Animation来实现的,一共有四种,分别为: AlphaAn ...
CSS3效果：animate实现点点点loading动画效果（二）
box-shadow实现的打点效果简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...
CSS3效果：animate实现点点点loading动画效果（一）
实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...
css3实现的3中loading动画效果
一.css3中animation动画各种属性详解: animation Value: [<animation-name> || <animation-duration> ...

随机推荐

poj 2431
大意: 有n个加油点,给出每个加油点距离终点的位置和能加多少油,最后一行给出总长度和最初的油量.求最少加几次油能到终点,不能到的话输出-1. Sample Input 4 4 4 5 2 11 5 1 ...
satellite-menu和ArcMenu
github上的开源库其实还是很不错的,之前的时候总感觉学一些开源库比较麻烦,里边有好多方法什么的,今天终于迈出了第一步,中间也遇到了一些问题,现在总结下,也给其他刚开始学习开源库的小伙伴一些指导: ...
OC-类
1.关于头文件 #include <stdio.h> #import <Foundation/Foundation.h> 区别:#import指令导入更快更有效率.#i ...
java之从字符串比较到==和equals方法区别
我们先看代码 String str1 = new String("hello"); String str2 = "hello"; System.out.prin ...
Spring学习之切入点表达式
链接地址:http://jinnianshilongnian.iteye.com/blog/1415606
商品列表中显示类别名称而不是类别ID
商品表中的字段包裹商品信息和categoryid 若要在商品列表中显示出categoryname,有两种做法: 第一种做法: 拿到categoryid后再跟数据库连接一下,然后拿出categoryna ...
php 字符串是否存在
/** * 方法库-字符串是否存在 * @param string $str :字符或字符串 * @param string $string :字符串 * @return string 例子: $st ...
centos无法载入 mcrypt 扩展,<br />请检查 PHP 配置，经过各种尝试，终于找到了解决办法
百度了无数个方法都没有解决问题,也是折腾死我了,最终解决了问题解决办法:安装php-mcrypt libmcrypt libmcrypt-devel这三个库文件 1.安装第三方yum源(默认yum源 ...
C99新特性
c99标准允许使用变长数组,变的意思是可以根据变量的值来指定数组的维数,如根据用户的输入值指定数组的大小,印象中以前是不可以的.现在在gcc中是可以的(PS:ansi c标准是C90标准): ==== ...
SQL Server 创建数据库快照
创建数据库快照: 必须在create database 命令中包括源数据库的每一个数据文件,原始逻辑名,新物理名与路径, 不能指定其他属性 create database db_snapshot_na ...

loading 动画效果（收藏起来以后留着慢慢用）

loading 动画效果（收藏起来以后留着慢慢用）的更多相关文章

随机推荐

热门专题