今天为大家带来一款由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
时间： 2024-10-10 11:00:16