<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 SVG全屏粒子隧道特效 - 站长素材</title>
<style>
body {
margin: 0;
}
body > svg {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="filter">
<feTurbulence type="fractalNoise" baseFrequency=".05"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 0 1 1"/>
</feComponentTransfer>
<feComposite in="SourceGraphic" operator="in"/>
<feMorphology radius="1" operator="dilate"/>
<feGaussianBlur stdDeviation="1"/>
</filter>
<circle r="150%"/>
<g fill="none" stroke="#bef" stroke-width="99%" filter="url(#filter)">
<circle cx="50%" cy="50%" r="57%" stroke-dasharray="2 60 .5 60"/>
<circle cx="50%" cy="50%" r="71%" stroke-dasharray=".5 43 2 47"/>
</g>
</svg>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>