一款由jquery实现的超炫的页面加载特效
2014-09-24 08:59
761 查看
今天为大家带来一款由jquery实现的超炫的页面加载特效。连续的几个页面分开特效。最后由三维的线条由远至近消失,然后由近至远出现。效果超级梦炫。一起看下效果图:
在线预览 源码下载
实现的代码。
html代码:
css代码:
js代码:
注:本文爱编程原创文章,转载请注明原文地址:/article/1211833.html
在线预览 源码下载
实现的代码。
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
注:本文爱编程原创文章,转载请注明原文地址:/article/1211833.html
相关文章推荐
- 一款由jquery实现的超炫的页面加载特效
- jquery实现进度条无百分比动画loading页面加载特效
- jquery实现页面加载进度条
- 【转】使用jquery实现图片预加载提高页面加载速度和用户体验
- jquery实现页面加载进度条(转)
- jquery实现页面提示,数据正在加载中。(
- JQuery实现滚动到页面底端时自动加载更多信息
- JQuery页面随滚动条动态加载效果实现
- struts+spring+hibernate用jquery实现数据分页异步加载,页面不刷新
- 基于jQuery实现模拟页面加载进度条
- #干货向#配合jquery实现异步加载页面元素
- 一款jQuery实现重力弹动模拟效果特效,弹弹弹,弹走IE6
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- Jquery实现页面加载时弹出对话框代码
- 利用JQuery的load函数动态加载其它页面的内容的实现代码
- 用jQuery模拟页面加载进度条的实现代码
- 【转】JQuery实现页面随滚动条滚动而动态加载内容的效果
- 2011-01-16 21:13 JQuery实现页面随滚动条滚动而动态加载内容的效果
- 基于jquery打造的一款全页面图片分享特效
- Jquery实现页面加载时弹出对话框代码