HTML 页面加载动画效果

浏览器：Chrome, IE

<!doctype html>

<html>

<head>

  <title>CSS transform: CSS only loading spinners</title>

<style>

/* general styling */

  body {

    width:450px;

    margin:18px auto;

  }

/* position the bars and balls correctly (rotate them and translate them outward)*/

.bar1 {

  transform:rotate(0deg) translate(0, -40px);opacity:0.12;

}

.bar2 {

  transform:rotate(45deg) translate(0, -40px);opacity:0.25;

}

.bar3 {

  transform:rotate(90deg) translate(0, -40px);opacity:0.37;

}

.bar4 {

  transform:rotate(135deg) translate(0, -40px);opacity:0.50;

}

.bar5 {

  transform:rotate(180deg) translate(0, -40px);opacity:0.62;

}

.bar6 {

  transform:rotate(225deg) translate(0, -40px);opacity:0.75;

}

.bar7 {

  transform:rotate(270deg) translate(0, -40px);opacity:0.87;

}

.bar8 {

  transform:rotate(315deg) translate(0, -40px);opacity:1;

}

/* set up the three bar spinners */

#div1, #div2,#div3 {

  position:relative;

  width:100px;

  height:100px;

  margin:25px;

  float:left;

  transform:scale(0.5);

  transform:scale(0.5);

  /* not used right now: */

  animation-name: rotateThis;

  animation-duration:2s;

  animation-iteration-count:infinite;

  animation-timing-function:linear;

}

#div1 div,

#div2 div,

#div3 div {

  width:10px;

  height:30px;

  background:#000;

  position:absolute;

  top:35px;

  left:45px;

}

/* shadows for the first spinner */

#div1 div {

  box-shadow:black 0 0 4px

}

  /* rounded outer corners for the second */

#div2 div {

  border-top-left-radius:10px;

  border-top-right-radius:10px;

}

/* full rounded corners and partially hidden for the third */

#div3 div {

  border-radius:20px;

  border-radius:20px;

}

#div3 .bar1,

#div3 .bar2,

#div3 .bar3 {opacity:0;}

/* set up the three ball spinners */

#div4, #div5, #div6 {

  position:relative;

  width:100px;

  height:100px;

  margin:25px;

  border-radius:100px;

  float:left;

  transform:scale(0.5);

  animation-name: rotateThis;

  animation-duration:2s;

  animation-iteration-count:infinite;

  animation-timing-function:linear;

}

#div4 div,

#div5 div,

#div6 div {

  width:20px;

  height:20px;

  background:#000;

  border-radius:40px;

  position:absolute;

  left:40px;

  top:40px;

}

/* add a shadow to the first */

#div4 div {

  box-shadow:black 0 0 4px;

}

/* increase the balls in size */

#div5 .bar1 {

  transform:rotate(0deg)   translate(0, -40px) scale(0.1);opacity:0.12;}

#div5 .bar2 {

  transform:rotate(45deg)  translate(0, -40px) scale(0.2);opacity:0.25;}

#div5 .bar3 {

  transform:rotate(90deg)  translate(0, -40px) scale(0.4);opacity:0.37;}

#div5 .bar4 {

  transform:rotate(135deg) translate(0, -40px) scale(0.6);opacity:0.50;}

#div5 .bar5 {

  transform:rotate(180deg) translate(0, -40px) scale(0.8);opacity:0.62;}

#div5 .bar6 {

  transform:rotate(225deg) translate(0, -40px) scale(1);opacity:0.75;}

#div5 .bar7 {

  transform:rotate(270deg) translate(0, -40px) scale(1.2);opacity:0.87;}

#div5 .bar8 {

  transform:rotate(315deg) translate(0, -40px) scale(1.4);opacity:1;}

/* hide the last halve */

#div6 .bar1 ,

#div6 .bar2,

#div6 .bar3 {opacity:0;}

/* uncomment this to use css animation in webkit browsers */

/* @-webkit-keyframes rotateThis {

  from {-webkit-transform:scale(0.5) rotate(0deg);}

  to {-webkit-transform:scale(0.5) rotate(360deg);}

} */

</style>

<script>

  //simple script to rotate all spinners 45 degrees on each tick

  //this works differently from the css transforms, which is smooth

  var count = 0;

  function rotate() {

    var elem = document.getElementById('div1');

    var elem2 = document.getElementById('div2');

    var elem3 = document.getElementById('div3');

    var elem4 = document.getElementById('div4');

    var elem5 = document.getElementById('div5');

    var elem6 = document.getElementById('div6');

    elem.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem2.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem3.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem4.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem5.style.transform = 'scale(0.5) rotate('+count+'deg)';

    elem6.style.transform = 'scale(0.5) rotate('+count+'deg)';

    if (count==360) { count = 0 }

    count+=45;

    window.setTimeout(rotate, 100);

  }

  window.setTimeout(rotate, 100);

</script>

</head>

<body>

<h2>Bars:</h2>

<div id="div1">

  <div class="bar1"></div>

  <div class="bar2"></div>

  <div class="bar3"></div>

  <div class="bar4"></div>

  <div class="bar5"></div>

  <div class="bar6"></div>

  <div class="bar7"></div>

  <div class="bar8"></div>

</div>

<div id="div2">

  <div class="bar1"></div>

  <div class="bar2"></div>

  <div class="bar3"></div>

  <div class="bar4"></div>

  <div class="bar5"></div>

  <div class="bar6"></div>

  <div class="bar7"></div>

  <div class="bar8"></div>

</div>

<div id="div3">

  <div class="bar1"></div>

  <div class="bar2"></div>

  <div class="bar3"></div>

  <div class="bar4"></div>

  <div class="bar5"></div>

  <div class="bar6"></div>

  <div class="bar7"></div>

  <div class="bar8"></div>

</div>

<h2 style="clear:both">Balls:</h2>

<div id="div4">

  <div class="bar1"></div>

  <div class="bar2"></div>

  <div class="bar3"></div>

  <div class="bar4"></div>

  <div class="bar5"></div>

  <div class="bar6"></div>

  <div class="bar7"></div>

  <div class="bar8"></div>

</div>

<div id="div5">

  <div class="bar1"></div>

  <div class="bar2"></div>

  <div class="bar3"></div>

  <div class="bar4"></div>

  <div class="bar5"></div>

  <div class="bar6"></div>

  <div class="bar7"></div>

  <div class="bar8"></div>

</div>

<div id="div6">

  <div class="bar1"></div>

  <div class="bar2"></div>

  <div class="bar3"></div>

  <div class="bar4"></div>

  <div class="bar5"></div>

  <div class="bar6"></div>

  <div class="bar7"></div>

  <div class="bar8"></div>

</div>

</body>

</html>

参考：http://kilianvalkhof.com/uploads/spinners/

HTML 页面加载动画效果的更多相关文章

CSS3实现的图片加载动画效果
来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...
加载动画效果 HTML+ CSS
加载动画效果写在前面在无限的时间的河流里,人生仅仅是微小又微小的波浪.--郭小川实现效果实现原理通过2个伪元素来设置3条颜色边框通过定位将3个圆弧边框层叠再一起,再通过旋转实现一个圆的效果 ...
CoreThink开发（十三）增加页面加载动画
效果: 加载动画是由jquery和fakeloader这个js库实现的. 其实这个也可以做成一个插件,用数据库记录是否开启,选择动画的样式,那样扩展性会更好. 源码资源已经上传在我的csdn下载中. ...
CSS动画实例：Loading加载动画效果（一）
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
CSS动画实例：Loading加载动画效果（三）
3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
ios 自定义加载动画效果
在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果. 在UIViewController的中加载等到效果,如下 - (void)vi ...
css3 加载动画效果
Loading 动画效果一 HTML 代码: <div class="spinner"> <div class="rect1&quo ...
loading加载动画效果js实现
<style>.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; ...
iOS - 落叶加载动画效果
代码下载地址:https://github.com/nLoser/LeafLoadingView 效果: 说明:效果是在网上看到的,并且自己按照效果自己实现,树叶使用CAEmitterLayer做的, ...

随机推荐

socket编程——一个简单的样例
从一个简单的使用TCP样例開始socket编程,其基本过程例如以下: server client ++ ...
Tinder 心动效果---卡片式view左右滑动
http://www.eoeandroid.com/thread-549316-1-1.html SlideCard.zip
【转】以XML文件方式保存用户数据——2013-08-25 22
正在做项目中有很多游戏数据要保存,常见的玩家数据这些比较简单的可以用CCUserDefault.它是cocos2d-x用来存取基本数据类型用的.保存为XML文件格式. 主要方法:(和java的map很 ...
javascript中的内置对象
2015.12.1 javascript中的内置对象复习: 1.js中的内置函数 alert prompt write parseInt parseFloat eval isNaN document ...
Linux下crontab命令详解
crontab -e编辑定时任务 * * * shell.sh 从左到右依次是:分钟.小时.天.周.月
ThinkPHP函数详解：F方法
我们已经了解了ThinkPHP中的S方法的用法,F方法其实是S方法的一个子集功能,仅用于简单数据缓存,并且只能支持文件形式,不支持缓存有效期,因为采用的是PHP返回方式,所以其效率较S方法较高,因此我 ...
ACM——简单排序
简单选择排序时间限制(普通/Java):1000MS/3000MS 运行内存限制:65536KByte总提交:836 测试通过:259 描述给定输入排序元素 ...
WildFly 9.0.2 + SQLServer + BIRT + JNDI 处理BIRT报表发布时数据源的修改
一.前提需求说明: 最近在做项目的时候使用jboss WildFly发布BIRT报表,在报表中我是直接添加的JDBC数据源,通过Database URL .用户名和密码连接数据库.后来在部署到正式和测 ...
php有三种工作模式
php有三种工作模式. 其中是最常见的是php作为一个模块工作在一个多进程的webserver中, 例如apache webserver. apache会启动一个主进程, 多个子进程(php). 主进 ...
Ext.Net学习笔记09：Ext.Net Store的用法
使用Handler处理分页首先来创建一般处理程序,我命名为StoreHandler.ashx,然后它的处理过程代码如下: public void ProcessRequest(HttpContext ...

HTML 页面加载动画效果

HTML 页面加载动画效果的更多相关文章

随机推荐

热门专题