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>
.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.2
s infinite ease-in-out;
animation: stretchdelay
1.2
s infinite ease-in-out;
}
.spinner .rect
2
{
-webkit-animation-delay:
-1.1
s;
animation-delay:
-1.1
s;
}
.spinner .rect
3
{
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
.spinner .rect
4
{
-webkit-animation-delay:
-0.9
s;
animation-delay:
-0.9
s;
}
.spinner .rect
5
{
-webkit-animation-delay:
-0.8
s;
animation-delay:
-0.8
s;
}
@-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
);
}
}
<div
class
=
"spinner"
></div>
width
:
60px
;
height
:
60px
;
background-color
:
#67CF22
;
margin
:
100px
auto
;
-webkit-animation: rotateplane
1.2
s infinite ease-in-out;
animation: rotateplane
1.2
s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0%
{ -webkit-transform: perspective(
120px
) }
50%
{ -webkit-transform: perspective(
120px
) rotateY(
180
deg) }
100%
{ -webkit-transform: perspective(
120px
) rotateY(
180
deg) rotateX(
180
deg) }
}
@keyframes rotateplane {
0%
{
transform: perspective(
120px
) rotateX(
0
deg) rotateY(
0
deg);
-webkit-transform: perspective(
120px
) rotateX(
0
deg) rotateY(
0
deg)
}
50%
{
transform: perspective(
120px
) rotateX(
-180.1
deg) rotateY(
0
deg);
-webkit-transform: perspective(
120px
) rotateX(
-180.1
deg) rotateY(
0
deg)
}
100%
{
transform: perspective(
120px
) rotateX(
-180
deg) rotateY(
-179.9
deg);
-webkit-transform: perspective(
120px
) rotateX(
-180
deg) rotateY(
-179.9
deg);
}
}
<div
class
=
"spinner"
>
<div
class
=
"double-bounce1"
></div>
<div
class
=
"double-bounce2"
></div>
</div>
.spinner {
width
:
60px
;
height
:
60px
;
position
:
relative
;
margin
:
100px
auto
;
}
.double-bounce
1
, .double-bounce
2
{
width
:
100%
;
height
:
100%
;
border-radius:
50%
;
background-color
:
#67CF22
;
opacity:
0.6
;
position
:
absolute
;
top
:
0
;
left
:
0
;
-webkit-animation: bounce
2.0
s infinite ease-in-out;
animation: bounce
2.0
s infinite ease-in-out;
}
.double-bounce
2
{
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
@-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
);
}
}
<div class=
"spinner"
>
<div class=
"cube1"
></div>
<div class=
"cube2"
></div>
</div>
.spinner {
margin
:
100px
auto
;
width
:
32px
;
height
:
32px
;
position
:
relative
;
}
.cube
1
, .cube
2
{
background-color
:
#67CF22
;
width
:
30px
;
height
:
30px
;
position
:
absolute
;
top
:
0
;
left
:
0
;
-webkit-animation: cubemove
1.8
s infinite ease-in-out;
animation: cubemove
1.8
s infinite ease-in-out;
}
.cube
2
{
-webkit-animation-delay:
-0.9
s;
animation-delay:
-0.9
s;
}
@-webkit-keyframes cubemove {
25%
{ -webkit-transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
) }
50%
{ -webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg) }
75%
{ -webkit-transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
) }
100%
{ -webkit-transform: rotate(
-360
deg) }
}
@keyframes cubemove {
25%
{
transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
);
-webkit-transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
);
}
50%
{
transform: translateX(
42px
) translateY(
42px
) rotate(
-179
deg);
-webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-179
deg);
}
50.1%
{
transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg);
-webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg);
}
75%
{
transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
);
-webkit-transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
);
}
100%
{
transform: rotate(
-360
deg);
-webkit-transform: rotate(
-360
deg);
}
}
<div class=
"spinner"
>
<div class=
"dot1"
></div>
<div class=
"dot2"
></div>
</div>
.spinner {
margin
:
100px
auto
;
width
:
90px
;
height
:
90px
;
position
:
relative
;
text-align
:
center
;
-webkit-animation: rotate
2.0
s infinite linear;
animation: rotate
2.0
s infinite linear;
}
.dot
1
, .dot
2
{
width
:
60%
;
height
:
60%
;
display
: inline-
block
;
position
:
absolute
;
top
:
0
;
background-color
:
#67CF22
;
border-radius:
100%
;
-webkit-animation: bounce
2.0
s infinite ease-in-out;
animation: bounce
2.0
s infinite ease-in-out;
}
.dot
2
{
top
:
auto
;
bottom
:
0px
;
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
@-webkit-keyframes rotate {
100%
{ -webkit-transform: rotate(
360
deg) }}
@keyframes rotate {
100%
{ transform: rotate(
360
deg); -webkit-transform: rotate(
360
deg) }}
@-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
);
}
}
<div class=
"spinner"
>
<div class=
"bounce1"
></div>
<div class=
"bounce2"
></div>
<div class=
"bounce3"
></div>
</div>
.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.4
s infinite ease-in-out;
animation: bouncedelay
1.4
s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode:
both
;
animation-fill-mode:
both
;
}
.spinner .bounce
1
{
-webkit-animation-delay:
-0.32
s;
animation-delay:
-0.32
s;
}
.spinner .bounce
2
{
-webkit-animation-delay:
-0.16
s;
animation-delay:
-0.16
s;
}
@-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
);
}
}
<div class=
"spinner"
></div>
.spinner {
width
:
40px
;
height
:
40px
;
margin
:
100px
auto
;
background-color
:
#333
;
border-radius:
100%
;
-webkit-animation: scaleout
1.0
s infinite ease-in-out;
animation: scaleout
1.0
s 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
;
}
}
<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>
</div>
.spinner {
margin
:
100px
auto
;
width
:
20px
;
height
:
20px
;
position
:
relative
;
}
.container
1
> div, .container
2
> div, .container
3
> div {
width
:
6px
;
height
:
6px
;
background-color
:
#333
;
border-radius:
100%
;
position
:
absolute
;
-webkit-animation: bouncedelay
1.2
s infinite ease-in-out;
animation: bouncedelay
1.2
s infinite ease-in-out;
-webkit-animation-fill-mode:
both
;
animation-fill-mode:
both
;
}
.spinner .spinner-container {
position
:
absolute
;
width
:
100%
;
height
:
100%
;
}
.container
2
{
-webkit-transform: rotateZ(
45
deg);
transform: rotateZ(
45
deg);
}
.container
3
{
-webkit-transform: rotateZ(
90
deg);
transform: rotateZ(
90
deg);
}
.circle
1
{
top
:
0
;
left
:
0
; }
.circle
2
{
top
:
0
;
right
:
0
; }
.circle
3
{
right
:
0
;
bottom
:
0
; }
.circle
4
{
left
:
0
;
bottom
:
0
; }
.container
2
.circle
1
{
-webkit-animation-delay:
-1.1
s;
animation-delay:
-1.1
s;
}
.container
3
.circle
1
{
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
.container
1
.circle
2
{
-webkit-animation-delay:
-0.9
s;
animation-delay:
-0.9
s;
}
.container
2
.circle
2
{
-webkit-animation-delay:
-0.8
s;
animation-delay:
-0.8
s;
}
.container
3
.circle
2
{
-webkit-animation-delay:
-0.7
s;
animation-delay:
-0.7
s;
}
.container
1
.circle
3
{
-webkit-animation-delay:
-0.6
s;
animation-delay:
-0.6
s;
}
.container
2
.circle
3
{
-webkit-animation-delay:
-0.5
s;
animation-delay:
-0.5
s;
}
.container
3
.circle
3
{
-webkit-animation-delay:
-0.4
s;
animation-delay:
-0.4
s;
}
.container
1
.circle
4
{
-webkit-animation-delay:
-0.3
s;
animation-delay:
-0.3
s;
}
.container
2
.circle
4
{
-webkit-animation-delay:
-0.2
s;
animation-delay:
-0.2
s;
}
.container
3
.circle
4
{
-webkit-animation-delay:
-0.1
s;
animation-delay:
-0.1
s;
}
@-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> ...
随机推荐
- C#读取csv格式文件
方法1:用一个System.Web.UI.HtmlControls.HtmlInputFile去handle文件选取 以下是button click event中的code,用来执行当文件选取了之后读 ...
- Gradle中文乱码
代码中的中文注释可能会引起Gradle报错 解决办法: 在项目下的build.gradle下添加以下代码即可解决 [java] view plaincopyprint? tasks.withType( ...
- C#5 复习总结循环 迭代和穷举
一.章节复习: 循环.反复执行某段语句一种语法形式. 1.基本语法: for( 初始条件 ; 循环条件 ; 状态的改变 ) { 循环体 } 循环的四要素. 循环的执行过程.初始条件--循环条件--循环 ...
- Django模板-分离的模板
上一篇Django模板-在视图中使用模板最后的问题,我们需要把数据和展现分离开. 你可能首先考虑把模板保存在文件系统的某个位置并用 Python 内建的文件操作函数来读取文件内容. 假设文件保存在 E ...
- SQL Server 分离与附加数据库
前期准备: 创建数据库 create database Studio on primary (name ='Studio',filename ='E:\Studio.mdf'), ...
- ARM 7 用户模式下禁止/使能中断的一种方法--使用软中断 for Keil MDK
最近写一个程序,需要在用户模式下关中断,但ARM 7的体系结构决定了中断必须在特权模式下才可以更改,所以想到使用ARM的软中断来实现关中断和开中断. 使用软中断,首先要有硬件指令的支持.ARM有条指令 ...
- schema://host[:port#]/path/.../[?query-string][#anchor]
1:http协议状态200 OK最常见的就是成功响应状态码200了, 这表明该请求被成功地完成,所请求的资源发送回客户端 302 Found重定向,新的URL会在response 中的Location ...
- Codeforces 293B
Codeforces 293B 原题 题目描述:给出一个\(n \times m\)的网格, 给定一个整数\(k\),网格上的每个数都不超过\(k\),其中有的格子是\(0\),要求把这些格子变成\( ...
- 本地/远程Service 和Activity 的交方式(转)
android SDK提供了Service,用于类似*nix守护进程或者windows的服务. Service有两种类型: 本地服务(Local Service):用于应用程序内部 远程服务(Remo ...
- 第一个使用Writer写的博客
今天开通的博客园的博客账户,先来尝试一下用哪种方式最适合写博. 目前用Live Writer. 以后计划在这里分享数据技术的技术体会和学习心得,尤其是大数据和数据仓库相关的知识.Hello my bl ...