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做的, ...

随机推荐

cocos2d-x 屏幕适配新解
转自:http://blog.leafsoar.com/archives/2013/05-10-19.html 为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 cocos2d-x(当前稳定版:2 ...
Java 实现组合(Composite)模式
类图 /** * 树总体 * * @author stone * */ public class Tree { private TreeNode root; //根节点 public Tree(St ...
careercup-递归和动态规划 9.7
9.7 编写函数,实现许多图片编辑软件都支持的“填充颜色”功能.给定一个屏幕(以二维数组表示,元素为颜色值).一个点和一个新的颜色值,将新颜色值填入这个点的周围区域,直到原来的颜色值全部改变. 类似l ...
【转】Cocos2d-x 2.0 拖尾效果深入分析
Cocos2d-x 2.0 拖尾效果深入分析另:本章所用Cocos2d-x版本为: cocos2d-2.0-x-2.0.2@ Aug 30 2012 http://cn.cocos2d-x.org/ ...
关于Servlet中重定向
public class Red1Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpSer ...
Java基础知识强化之IO流笔记48：IO流练习之复制单级文件夹案例
1. 复制单级文件夹数据源:e:\\demo 目的地:e:\\test 分析: A:封装目录 B:获取该目录下的所有文本的File数组 C:遍历该File数组,得到每一个File对象 ...
MAC上搭建Jenkins + Android + IOS自动开发部署环境
因为MAC是大小写不敏感的操作系统,很多Linux命令不支持,所以首先要创建大小写敏感的操作系统. 设置静态IP 打开"System Preferences..." 点击" ...
Spring整合JMS(一)——基于ActiveMQ实现
1.1 JMS简介 JMS的全称是Java Message Service,即Java消息服务.它主要用于在生产者和消费者之间进行消息传递,生产者负责产生消息,而消费者负责接收消息.把它应用到 ...
addEventListener 用法
addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEve ...
新增的html5中js获取方法
一.querySelector 获取的选择器与jquery的选择器相同

HTML 页面加载动画效果

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

随机推荐

热门专题