jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效(推荐)
这是一组效果非常炫酷的CSS3页面预加载loading动画特效。该特效共有30种不同的loading效果。所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画。当你点击页面的任何一个地方时,loading动画就会被隐藏。
这30种loading动画分为3组:方形加载动画特效、圆形加载动画特效和长条形加载动画特效。每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码。
HTML结构
下面是第一种效果的制作方式。所有的DEMO都是使用嵌套div的HTML结构。在第一个DEMO中,嵌套了4层div元素,其中最里层的div#object是用于动画的元素。
外层的div元素主要用于定位。
CSS样式
首先要设置最外层的div的定位方式为固定定位方式,这样方便它里面的元素制作各种动画效果。#loading{
background-color: #bd4932;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
接着分别设置第二层和第三层div元素。第二层div元素设置为相对定位,宽度和高度均为100%。第三层div是实际动画元素的包裹元素,它设置为绝度定位,并且位置居中。#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
最后,使用keyframes帧动画使div#object元素动起来,@-webkit-keyframes animate是为了兼容webkit内核的浏览器。@keyframes animate则是为了兼容IE浏览器。#object{
width: 80px;
height: 80px;
background-color: #FFF;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
margin-right: auto;
margin-left: auto;
margin-top: 60px;
}
@-webkit-keyframes animate {
0% { -webkit-transform: perspective(160px); }
50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
@keyframes animate {
0% {
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
} 50% {
transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
} 100% {
transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}
JavaScript
插件中还使用了一些jQuery代码来隐藏loading效果。$(window).load(function() {
$("#loading-center").click(function() {
$("#loading").fadeOut(500);
})
});
在实际应用中,你可能需要这样使用这些Loading效果:$(window).load(function() {
$("#loading").fadeOut(500);
})
上面的代码表示在页面加载完成之后0.5秒的时间内将loading动画淡入淡出隐藏起来。
jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效(推荐)相关推荐
- 好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...
- 多功能用途 Gooey Effects 7种炫酷HTML5 SVG液态水滴融合动画特效
查看原文 查看在线演示Demo和更多原文内容教程: 7种炫酷HTML5 SVG液态水滴融合动画特效 这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML ...
- CSS3和js炫酷点击按钮3D翻转动画特效
简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览 源码下载 ...
- html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML元素,如菜单.分页按钮.APP.选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷. SVG ...
- html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
- html5 loading游戏,12种炫酷html5 svg加载loading动画特效
12种炫酷html5 svg加载loading动画特效 刘振兴 代码分享 2015年11月23日 14182 3条评论 这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...
- css3特效框,科技常识:6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效 的相关资料,希望小伙伴们看了有所帮助. ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载 更多专业前端知识,请上 [猿2048]www.mk2048.com
- HTML显示波形,CSS3波形loading动画特效
这是一款使用CSS3制作的波形loading动画特效.这组波形loading动画特效共有11种波形动画,分别使用不同的CSS3 animation动画来实现. 使用方法 在页面中引入style.css ...
最新文章
- JGG:中大骆观正组开发微量样品m(6)A测序新技术
- 我国数字出版发展尚存三大难题
- python交作业的格式_python作业4
- kompozer如何启动_使用KompoZer创建网站
- 离散数学之集合论 【下】
- 预测:小程序入口预测汇总(8种可能)
- 【java SOAP】对SOAP的一个个人印象
- C/C++常量数据类型
- .Net Core 学习笔记1——包、元包、框架
- 摄像头训练的吃豆人,我还是没活几集 | TensorFlow.js
- 实战CSS:静态百度首页实现
- jdbc连接timesten_采用java链接timesten内存数据库
- Landsat 数据其中 Collection 1/2 、Level 1/2、Tier 1/2的区别
- r语言如何计算t分布临界值_医学统计与R语言:这个Calibration plot有点色!
- Javaweb实现登录界面“记住我”功能
- python使用Speech_Recognition实现普通话识别(一)
- CDH问题汇总之——ERROR main:com.cloudera.server.cmf.bootstrap.EntityManagerFactoryBean: Tables have unsuppo
- teamviewer安装失败
- ssh登录提示密码错误
- 计算机与plc通信参数,PLC与PC计算机通信