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://4137613.blog.51cto.com/4127613/754729 第一部分:基本图形绘制 cocos2dx封装了大量opengl函数,用于快速绘制基本图形,这些代码的 ...
python中的对象拷贝
python中.进行函数參数传递或者返回值时,假设是一般的变量,会拷贝传递.假设是列表或字典则是引用传递.那python怎样对列表和字典进行拷贝传递呢:标准库的copy模块提供了两个方法:copy和d ...
android94 样式和主题
style.xml <resources xmlns:android="http://schemas.android.com/apk/res/android"> < ...
Cisco交换机设置管理IP
需要准备一根CONSOLE线和带串行接口的电脑. (图1) 用CONSOLE线连接好电脑与交换机(交换机的CONSOLE口一般都有表示). 然后按照图1点“开始→程序→超级终端”会弹出来一个窗口(图2 ...
在Android应用程序使用YouTube API来嵌入视频
在Android版YouTube播放器API使您可以将视频播放功能到你的Android应用程序.该API允许您加载和播放YouTube视频(和播放列表),并自定义和控制视频播放体验. 您可以加载或暗示 ...
Python 学习开发笔记之IO操作
文件或者目录的路径操作获取当前工作目录 import os import sys cwd = os.getcwd() 路径的拼接 os.path.join(path,"dir") ...
MYSQL小常识
在mysql里面利用str_to_date()把字符串转换为日期此处以表T_TGS_ALARMED的BJSJ为例,查询当前时间在此范围之内的数据. insert into T_TGS_ALARMED ...
Python入门学习教程：数据库操作，连接MySql数据库
各位志同道合的同仁可以点击上方关注↑↑↑↑↑↑ 本教程致力于程序员快速掌握Python语言编程. 本文章内容是基于上次课程Python教程:Python教程:连接数据库,对数据进行增删改查操作和py ...
NChome导出补丁包需要注意的东西
Java集合和PHP的对比
这里突然感觉到在java中的集合,和php的数组非常相似 .

HTML 页面加载动画效果

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

随机推荐

热门专题