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做的, ...
随机推荐
- Eclipse开发PHP环境配置
首先准备好软件: 1. Apache,到这里找个最新版本 2. PHP,到这里下载 3. Eclipse IDE for Java EE Developers,到这里下载 4. DLTK Core F ...
- Android UI开发第三十三篇——Navigation Drawer For Android API 7
Creating a Navigation Drawer中使用的Navigation Drawer的android:minSdkVersion="14",现在Android API ...
- Android 颜色渲染(六) RadialGradient 环形渲染
Android 颜色处理(六) RadialGradient 环形渲染 public RadialGradient(float x, float y, float radius, int[] colo ...
- [Canvas] Introduction to drawing with p5js
In this lesson we look at using color and the basic drawing methods of p5js, and how they can be com ...
- [HTTP2] HTTP1 probs and HTTP2 saves
1. HOL (HEADS of LINE BLOCKING) Too many requests in the header tag. Broswer can allow 6 reuqest to ...
- 111_leetcode_Best Time to Buy and Sell Stock III
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 进程环境之main函数
C程序总是从main函数开始执行.main函数的原型是: int main( int argc, char *argv[] ); 其中,argc是命令行参数的数目,argv是指向参数的各个指针所构成的 ...
- gallery左右滑动时图片淡入淡出
前几天,公司项目有一个功能要做成滑动图片的淡入淡出,要一边滑动一边改变,所以ViewFlipper左右滑动效果就不能了.网上找了很久,也找不到资料,所以自己写了一个,通过滑动改变imageView的透 ...
- mysqldump导出csv格式文件
mysqldump bstar -t -T/tmp Nvr --fields-enclosed-by=\" --fields-terminated-by=, --where=" ...
- ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值
检查插入的值是否大于该字段数据类型约束的长度. 这个异常是指,用户向数据库执行插入数据操作时,某条数据的某个字段值过长,如 果是varchar2类型的,当长度超过2000,--4000(最大值)之间的 ...