一款由jquery实现的超炫的页面加载特效
今天为大家带来一款由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实现的超炫的页面加载特效的更多相关文章
- 一款基于jquery带百分比的响应式进度加载条
今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...
- Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- 我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
- 基于css3炫酷页面加载动画特效代码
基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- jquery和js的几种页面加载函数的方法以及执行顺序
参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html https://www.cnblogs.com/james641/p/783837 ...
- jquery实现表单验证与页面加载之后执行渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jquery和svg超炫的网页动画
今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
随机推荐
- VNC-tigervnc-server远程调用图形化
远程调用Linux图形化,很不错的.. 01.远程Linux须装图形化 yum groupinstall -y 'Desktop' 'X Window System' #xclock试图形 ...
- oper
package main.java.com.zte.controller.ems; import java.util.HashMap; import java.util.List; import ja ...
- listView滚动事件
listView滚动事件 实现接口: android.widget.AbsListView.OnScrollListener Interface definition for a callback t ...
- Visual C#两分钟搭建BHO IE钩子
微软在1997年正式推出Browser Helper Object (BHO), 使程序员能够更好的对IE进行二次开发和操作. 在通过编写BHO程序数月后, 我希望把我的一些经验告诉才开始的同志, 避 ...
- HDUOJ-----2068RPG的错排
RPG的错排 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- poj----Maximum sum(poj 2479)
Maximum sum Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 30704 Accepted: 9408 Desc ...
- Ulipad Python输入先后输出问题
print "Enter a interger"number=input() 在菜单栏 python-----设置参数----在Parameters:那栏加个参数 -u , 就可以 ...
- LINUX使用FTP搭建网络版YUM源
在YUM,FTP服务器上配置(192.168.56.2) .安装.配置vsftp # rpm -ivh vsftpd--.el6.x86_64 # chkconfig vsftpd on # serv ...
- Vue 最传统的新增行,删除行,提交的数据整合
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Matlab图形调色
Matlab图形调色 Simple example var colormap = require('colormap') options = { colormap: 'jet', // pic ...