今天为大家带来一款由jquery实现的超炫的页面加载特效。连续的几个页面分开特效。最后由三维的线条由远至近消失，然后由近至远出现。效果超级梦炫。一起看下效果图：

在线预览   源码下载

实现的代码。

html代码：

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1200 600">

        <line id="uno" x1="600" y1="0" x2="600" y2="0" stroke="navajowhite" stroke-width="1"

            stroke-linecap="round" />

        <line id="dos" x1="1200" y1="300" x2="1200" y2="300" stroke="teal" stroke-width="1"

            stroke-linecap="round" />

        <line id="tres" x1="0" y1="0" x2="0" y2="0" stroke="darkseagreen" stroke-width="1"

            stroke-linecap="round" />

        <line id="cuatro" x1="0" y1="600" x2="0" y2="600" stroke="tomato" stroke-width="1"

            stroke-linecap="round" />

        <line id="cinco" x1="1200" y1="0" x2="1200" y2="0" stroke="slateblue" stroke-width="1"

            stroke-linecap="round" />

        <line id="seis" x1="1200" y1="600" x2="1200" y2="600" stroke="turquoise" stroke-width="1"

            stroke-linecap="round" />

        <g id="vertical-first">

            <line class="vertical" x1="100" y1="0" x2="100" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="200" y1="0" x2="200" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="300" y1="0" x2="300" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="400" y1="0" x2="400" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="500" y1="0" x2="500" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="600" y1="0" x2="600" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="700" y1="0" x2="700" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="800" y1="0" x2="800" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="900" y1="0" x2="900" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1000" y1="0" x2="1000" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1100" y1="0" x2="1100" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="0" x2="1200" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="150" y1="0" x2="150" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="250" y1="0" x2="250" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="350" y1="0" x2="350" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="450" y1="0" x2="450" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="550" y1="0" x2="550" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="650" y1="0" x2="650" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="750" y1="0" x2="750" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="850" y1="0" x2="850" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="950" y1="0" x2="950" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1050" y1="0" x2="1050" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1150" y1="0" x2="1150" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="50" y1="0" x2="50" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="50" x2="0" y2="50" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="100" x2="0" y2="100" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="150" x2="0" y2="150" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="200" x2="0" y2="200" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="250" x2="0" y2="250" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="300" x2="0" y2="300" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="350" x2="0" y2="350" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="400" x2="0" y2="400" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="450" x2="0" y2="450" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="500" x2="0" y2="500" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="550" x2="0" y2="550" stroke="black" stroke-width="1" />

            <line class="vertical" x1="0" y1="600" x2="0" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="100" y1="600" x2="100" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="200" y1="600" x2="200" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="300" y1="600" x2="300" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="400" y1="600" x2="400" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="500" y1="600" x2="500" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="600" y1="600" x2="600" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="700" y1="600" x2="700" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="800" y1="600" x2="800" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="900" y1="600" x2="900" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1000" y1="600" x2="1000" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1100" y1="600" x2="1100" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="600" x2="1200" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="150" y1="600" x2="150" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="250" y1="600" x2="250" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="350" y1="600" x2="350" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="450" y1="600" x2="450" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="550" y1="600" x2="550" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="650" y1="600" x2="650" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="750" y1="600" x2="750" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="850" y1="600" x2="850" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="950" y1="600" x2="950" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1050" y1="600" x2="1050" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1150" y1="600" x2="1150" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="50" y1="600" x2="50" y2="600" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="0" x2="1200" y2="0" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="50" x2="1200" y2="50" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="100" x2="1200" y2="100" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="150" x2="1200" y2="150" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="200" x2="1200" y2="200" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="250" x2="1200" y2="250" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="300" x2="1200" y2="300" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="350" x2="1200" y2="350" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="400" x2="1200" y2="400" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="450" x2="1200" y2="450" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="500" x2="1200" y2="500" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="550" x2="1200" y2="550" stroke="black" stroke-width="1" />

            <line class="vertical" x1="1200" y1="600" x2="1200" y2="600" stroke="black" stroke-width="1" />

        </g>

    </svg>

css代码：

 body

        {

            background-color: snow;

        }

        body, svg

        {

            width: 100%;

            height: 100%;

        }

js代码：

 $("#uno")

            .delay(200)

            .velocity({ y2: 600 }, { duration: 1500, easing: "spring" })

            .delay(50)

            .velocity({ strokeWidth: 1500 });

        $("#dos")

            .delay(2000)

            .velocity({ x2: 0 }, { duration: 1500, easing: "swing" })

            .delay(50)

            .velocity({ strokeWidth: 1500 });

        $("#tres")

            .delay(4000)

            .velocity({ x2: 1200, y2: 600 }, { duration: 1500, easing: "spring" })

            .delay(50)

            .velocity({ strokeWidth: 1500 });

        $("#cuatro")

            .delay(6000)

            .velocity({ x2: 1200, y2: 0 }, { duration: 1500, easing: "swing" })

            .delay(50)

            .velocity({ strokeWidth: 1500 });

        $("#cinco")

            .delay(8000)

            .velocity({ x2: 0, y2: 600 }, { duration: 1500, easing: "spring" })

            .delay(50)

            .velocity({ strokeWidth: 1500 });

        $("#seis")

            .delay(10000)

            .velocity({ x2: 0, y2: 0 }, { duration: 1500, easing: "spring" })

            .delay(50)

            .velocity({ strokeWidth: 1500 });

        $(".vertical")

            .delay(12000)

            .velocity({ y2: 300, x2: 600 }, { duration: 1500, easing: "easeInCubic" })

            .delay(100)

            .velocity({ y1: 300, x1: 600 }, { duration: 1500, loop: 1, easing: "easeInCubic" }); //@ sourceURL=pen.js

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/7265

一款由jquery实现的超炫的页面加载特效的更多相关文章

  1. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

  2. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  3. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  4. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

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

    基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  6. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  7. jquery实现表单验证与页面加载之后执行渲染

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 基于jquery和svg超炫的网页动画

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: ...

  9. 一款纯css3实现的超炫动画背画特效

    之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览  ...

随机推荐

  1. Oracle常见的异常处理

    总结了在操作数据库的时候常常遇见的Oracle异常以及处理方法. 代码 提示 备注 一般处理方法 ORA-01861 文字与格式字符串不匹配- ORA-00904 invalid column nam ...

  2. Linux链接文件ln

    链接命令:ln 生成链接文件   ln [源文件] [目标目录] : 创建硬链接 -s:创建软链接    硬链接特征:(ln )1.拥有相同的i节点和存储block快,可以看做是同一个文件2.可通过i ...

  3. Nginx配置error_page 404错误页面

    问题由来 昨天一网友在segmentfault.com上提问,无法做404重定向 打开对方的网站随便输入一个错误的地址发现给出了404代码,但是页面完全空白,并没有显示404页面的设定内容 当时就明白 ...

  4. C#利用反射机制调用dll

    利用反射进行动态加载和调用. Assembly ass=Assembly.LoadFrom(DllPath); //利用dll的路径加载,同时将此程序集所依赖的程序集加载进来,需后辍名.dll Ass ...

  5. 为Github 托管项目的访问添加SSH keys

    为了便于访问远程仓库,各个协作者将自己的本地的项目内容推送到远程仓库中,使用 SSH keys 验证github的好处:不用每次提交代码时都输入用户名和密码. 如果SSH key没有添加到github ...

  6. ubuntu（14.04版本） 配置虚拟环境（一个ip对应多个域名）

    以下操作是建立在apahce安装成功的情况下 1.配置本地的host. 假设虚拟主机上的ip是:192.168.1.51,那么客户端本地的host可以配置成:

  7. Windows2008R2允许多用户远程登录设置

    Windows 2008 R2终端服务器安装配置 后面的一律下一步就可以安装完成了,下面是如何设置多用户远程登陆. Windows2008允许多用户远程登录设置 服务器重启,以上配置全部生效.

  8. PowerDesigner删除外键关系,而不删除外键列[转]

    PowerDesigner中配置外键关系时,如果要删除配置的外键关系,默认设置会一同删除外键列. 要更改此设置,需在菜单栏tools中打开Model Options,在Model Settings中点 ...

  9. CMA概述

    前言 本文是近期学习CMA模块的一个学习笔记,方便日后遗忘的时候,回来查询以便迅速恢复上下文. 学习的基本方法是这样的:一开始,我自己先提出了若干的问题,然后带着这些问题查看网上的资料,代码,最后整理 ...

  10. java的jdbc简单封装

    在学了jdbc一段时间后感觉自己写一个简单的封装来试试,于是參考的一些资料就写了一下不是多好,毕竟刚学也不太久 首先写配置文件:直接在src下建立一个db.properties文件然后写上内容 < ...