写几个简单的加载中动画吧。

像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小。css3里面有一个用于尺度变换的方法:scale(x,y)定义 2D 缩放转换,改变元素的宽度和高度

第四种就是一个小球从上往下跌落,再弹回去,在上面的时候速度最小,下面的时候速度最大。由于该小球只进行了上下的移动,所以我们可以运用:translateY(n):定义 2D 转换,沿着 Y 轴移动元素,从而实现小球沿Y方向来回移动。

废话不多说了,上代码。

首先,第一个加载中的动画:

 <div id="loading1">
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
</div>

html Code

 .demo1 {
width: 4px;
height: 4px;
border-radius: 2px;
background: #68b2ce;
float: left;
margin: 0 3px;
animation: demo1 linear 1s infinite;
-webkit-animation: demo1 linear 1s infinite;
}
.demo1:nth-child(1){
animation-delay:0s;
}
.demo1:nth-child(2){
animation-delay:0.15s;
}
.demo1:nth-child(3){
animation-delay:0.3s;
}
.demo1:nth-child(4){
animation-delay:0.45s;
}
.demo1:nth-child(5){
animation-delay:0.6s;
}
@keyframes demo1
{
0%,60%,100% {transform: scale(1);}
30% {transform: scale(2.5);}
}
@-webkit-keyframes demo1
{
0%,60%,100% {transform: scale(1);}
30% {transform: scale(2.5);}
}

css Code

第二个动画和第一个动画大同小异,第一个动画是将小球整体变大变小,第二动画则是将小方块的高度变大变小,而宽度不变:

 <div id="loading2">
<div class="demo2"></div>
<div class="demo2"></div>
<div class="demo2"></div>
<div class="demo2"></div>
<div class="demo2"></div>
</div>

html Code

 .demo2 {
width: 4px;
height: 6px;
background: #68b2ce;
float: left;
margin: 0 3px;
animation: demo2 linear 1s infinite;
-webkit-animation: demo2 linear 1s infinite;
}
.demo2:nth-child(1){
animation-delay:0s;
}
.demo2:nth-child(2){
animation-delay:0.15s;
}
.demo2:nth-child(3){
animation-delay:0.3s;
}
.demo2:nth-child(4){
animation-delay:0.45s;
}
.demo2:nth-child(5){
animation-delay:0.6s;
}
@keyframes demo2
{
0%,60%,100% {transform: scale(1);}
30% {transform: scaleY(3);}
}
@-webkit-keyframes demo2
{
0%,60%,100% {transform: scale(1);}
30% {transform: scaleY(3);}
}

css Code

第三个动画就需要将小球的位置定位一下,让几个小球整体上看起来围成一个圆,然后就像第一个一样使小球变大变小:

 <div id="loading3">
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
<div class="demo3"></div>
</div>

html Code

 #loading3 {
position: relative;
width: 50px;
height: 50px;
}
.demo3 {
width: 4px;
height: 4px;
border-radius: 2px;
background: #68b2ce;
position: absolute;
animation: demo3 linear 0.8s infinite;
-webkit-animation: demo3 linear 0.8s infinite;
}
.demo3:nth-child(1){
left: 24px;
top: 2px;
animation-delay:0s;
}
.demo3:nth-child(2){
left: 40px;
top: 8px;
animation-delay:0.1s;
}
.demo3:nth-child(3){
left: 47px;
top: 24px;
animation-delay:0.1s;
}
.demo3:nth-child(4){
left: 40px;
top: 40px;
animation-delay:0.2s;
}
.demo3:nth-child(5){
left: 24px;
top: 47px;
animation-delay:0.4s;
}
.demo3:nth-child(6){
left: 8px;
top: 40px;
animation-delay:0.5s;
}
.demo3:nth-child(7){
left: 2px;
top: 24px;
animation-delay:0.6s;
}
.demo3:nth-child(8){
left: 8px;
top: 8px;
animation-delay:0.7s;
} @keyframes demo3
{
0%,40%,100% {transform: scale(1);}
20% {transform: scale(3);}
}
@-webkit-keyframes demo3
{
0%,40%,100% {transform: scale(1);}
20% {transform: scale(3);}
}

css Code

接下来是第四个动画:

 <div id="loading5">
<div class="demo5"></div>
</div>
 #loading5 {
width: 20px;
height: 100px;
border-bottom: 1px solid #68b2ce;
}
.demo5 {
width: 20px;
height: 20px;
border-radius: 10px;
background: #68b2ce;
animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
-webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
}
@keyframes demo5
{
0%{
transform:translateY(0px);
-webkit-transform:translateY(0px);
}
100% {
transform:translateY(80px);
-webkit-transform:translateY(80px);
}
}
@-webkit-keyframes demo5
{
0%{
transform:translateY(0px);
-webkit-transform:translateY(0px);
}
100% {
transform:translateY(80px);
-webkit-transform:translateY(80px);
}
}

css Code

以上就是这几个简单的加载中小动画的内容了。

css3动画-加载中...的更多相关文章

  1. 纯CSS3技术 加载中

    你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html  <div class="loader">加载中...</div> css: 图( ...

  2. layui数据表格分页加载动画,自己定义加载动画,"加载中..."

    记录思路,仅供参考 在表格渲染完成后,在done回调函数中给分页动态加点击事件, 关闭"加载中..."动画也是在 done回调函数中关闭 这是我实现的思路,记录给大家参考. , d ...

  3. 【Demo】CSS3 动画 加载进度条

    实例结果图: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. CSS3实现加载中的动画效果

    本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...

  5. CSS3实现加载中效果

    代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <tit ...

  6. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

  7. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  8. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  9. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

随机推荐

  1. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  2. ssh动态转发小记

    ssh,一般常用来做远程登录管理,也就是连上远程机器,得到一个shell,然后交互式地在上面敲命令-看结果-再敲命令. 偶尔也会用在脚本里,做些自动化批处理上传下载的操作,但本质上也是用shell来执 ...

  3. 14、/proc/cpuinfo 文件(查看CPU信息)

    转载http://www.cnblogs.com/itcomputer/p/4888438.html /proc/cpuinfo文件分析 根据以下内容,我们则可以很方便的知道当前系统关于CPU.CPU ...

  4. StringBuffer输出

    public class Test { public static void main(String[] args) { StringBuffer a = new StringBuffer(" ...

  5. 【Qt官方例程学习笔记】Raster Window Example(画笔的平移/旋转/缩放应用)

    这个例子显示了如何使用QPainter渲染一个简单的QWindow. 值得学习的内容 <QtGui>头文件 #include <QtGui>就可以使用Qt GUI模块中的所有类 ...

  6. .net core 中使用NLog

    在.net standard 2.0.3 和.net core 2.1适用.其他版本的.net 应该也可以. 1.新建一个空白解决方案,再建一个类库 2.安装NLog.Config,会生成一个配置文件 ...

  7. java工具类学习整理——集合

    好久没有总结一些东西了,同时集合部分的知识点也学习的比较早了,但是从来没有抽时间去研究和学习,今天正好有时间就总结一下map常用的遍历方法: package runningwhile; import ...

  8. 让你的spring-boot应用日志随心所欲--spring boot日志深入分析

    1.spring boot日志概述 spring boot使用Commons Logging作为内部的日志系统,并且给Java Util Logging,Log4J2以及Logback都提供了默认的配 ...

  9. giihub上的关于js的43道题目

    参考 https://github.com/lydiahallie/javascript-questions

  10. POJ1014 Dividing

    题目来源:http://poj.org/problem?id=1014 题目大意: Marsha和Bill拥有一些弹珠.但是这些弹珠的价值不一样.每个弹珠的价值都是1到6之间的自然数.他们希望把这些弹 ...