基于css3炫酷页面加载动画特效代码

基于CSS3实现35个动画SVG图标。这是一款基于jQuery+CSS3实现的SVG图标动画代码。效果图如下：

实现的代码。

html代码：

 <div class="loaders">

      <div class="loader">

        <div class="loader-inner ball-pulse">

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-grid-pulse">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-clip-rotate">

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-clip-rotate-pulse">

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner square-spin">

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-clip-rotate-multiple">

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-pulse-rise">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-rotate">

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner cube-transition">

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-zig-zag">

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-zig-zag-deflect">

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-triangle-path">

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-scale">

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner line-scale">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner line-scale-party">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-scale-multiple">

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-pulse-sync">

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-beat">

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner line-scale-pulse-out">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner line-scale-pulse-out-rapid">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-scale-ripple">

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-scale-ripple-multiple">

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-spin-fade-loader">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner line-spin-fade-loader">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner triangle-skew-spin">

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner pacman">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner ball-grid-beat">

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

      </div>

      <div class="loader">

        <div class="loader-inner semi-circle-spin">

          <div></div>

        </div>

      </div>

    </div>

via：http://www.w2bc.com/Article/33625

基于css3炫酷页面加载动画特效代码的更多相关文章

CSS3 Loading进度条加载动画特效
在线演示本地下载
16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
一款由jquery实现的超炫的页面加载特效
今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览源码下载实现的代码. ...
纯css3实现的win8加载动画
今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览源码下载实现的代码. html代码: <div class=&quo ...
CSS3实现的图片加载动画效果
来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...
10大炫酷的HTML5文字动画特效欣赏
文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...
html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
CoreThink开发（十三）增加页面加载动画
效果: 加载动画是由jquery和fakeloader这个js库实现的. 其实这个也可以做成一个插件,用数据库记录是否开启,选择动画的样式,那样扩展性会更好. 源码资源已经上传在我的csdn下载中. ...

随机推荐

repr
>>> import datetime >>> today=datetime.datetime.now() >>> today datetime. ...
PHP生成缩略图、加水印
<?php class ThumbWaterImages{ /** * 生成缩略图/加水印 * classname ThumbWaterImages * datetime:2015-1-15 * ...
tomcat占用cpu过高解决办法
在工作中经常遇到tomcat占用cpu居高不下,针对这种情况有以下处理办法进行排查. jps --> 查看java的进程 top -Hp pid --> 根据jps得到的进程号(pid), ...
HDFS配额管理指南
原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_quota_admin_guide.html Hadoop分布式文件系统(HDFS)允许管理员为每个 ...
OAF_OAF增删改-新增的实现（案例）
2014-09-14 Created By BaoXinjian
谱聚类（Spectral clustering）（1）：RatioCut
作者:桂. 时间:2017-04-13 19:14:48 链接:http://www.cnblogs.com/xingshansi/p/6702174.html 声明:本文大部分内容来自:刘建平Pi ...
关于HTTP协议(未完)
转 : https://www.cnblogs.com/ranyonsue/p/5984001.html
在centos7中用mariadb代替了mysql数据库吗
从最新版本的linux系统开始(如 Centos7),默认的是 Mariadb而不是mysql!(mysql被闭源厂家收购,有闭源风险) 使用系统自带的repos安装很简单: yum install ...
黑马day18 鼠标事件&图片变大
有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大.然后鼠标移动,图片也会跟着移动,接下来我就使用jquery来实现这样的效果: 这是图片文件夹: < ...
HLJU 1046: 钓鱼(数据增强版) （贪心+优化）
1046: 钓鱼(数据增强版) Time Limit: 1 Sec Memory Limit: 128 MB Submit: 11 Solved: 3 [id=1046">Subm ...

基于css3炫酷页面加载动画特效代码

基于css3炫酷页面加载动画特效代码的更多相关文章

随机推荐

热门专题