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

随机推荐

更改 Tomcat 日志路径
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
SQL Server解决死锁问题
用以下语句查询所有死锁的进程号和表名: SELECT request_session_id spid, OBJECT_NAME( resource_associated_entity_id ...
[TypeScript] 0.First Example
Create a greeter.ts file: class Student { fullname : string; constructor(public firstname, public mi ...
Redis学习手册(虚拟内存)
一.简介: 和大多NoSQL数据库一样,Redis同样遵循了Key/Value数据存储模型.在有些情况下,Redis会将Keys/Values保存在内存中以提高数据查询和数据修改的效率,然而这样的做法 ...
careercup-数学与概率 7.5
7.5 在二维平面上,有两个正方形,请找出一条直线,能够将这两个正方形对半分.假定正方形的上下两条边与x轴平行. 解法: 要将两个正方形对半分,这条线必须连接两个正方形的中心点.利用slope=(y1 ...
常用工具之stunnel
The stunnel program is designed to work as an SSL encryption wrapper between remote client and local ...
DotNetTextBox使用方法步骤
对于使用这个控件的研究我是用4个小时的工作终于完成成功了现在请允许我在这里和你讲讲这个控件的使用方法第一首先要从百度或是谷歌里下载一个dotnetTextBox第三方控件在解压后里面有三个文件分 ...
Swift之语法1(精简版)
1. Swift简介 2010年的夏天,苹果公司的开发人员Chris Lattne接到了一个特别的任务,为OS X 和iOS平台开发下一代的编程语言,也就是Swift. 苹果公司于2014年WWDC( ...
Cannot load JDBC driver class 'oracle.jdbc.driver.OracleDriver'
出现这个问题,说明oracle的驱动包没有成功加载. 1.检查maven pom.xml有没有引入驱动: <dependency> <group ...
跨时钟域设计【二】——Fast to slow clock domain
跨时钟域设计中,对快时钟域的Trigger信号同步到慢时钟域,可以采用上面的电路实现,Verilog HDL设计如下: // Trigger signal sync, Fast clock dom ...

HTML 页面加载动画效果

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

随机推荐

热门专题