<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 SVG卡通小动物动画特效 - 网页模板</title>
<link href='https://fonts.useso.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" type="text/css" href="css/husky.css" />
</head>
<body class="demo-husky">
<div class="snow"></div>
<div class="container">
<header class="zzsc-header">
<h1>Animated Animals</h1>
<nav class="zzsc-demos">
<a class="current-demo" href="index.html" title="Alex the CSS Husky"><img src="img/link-husky.png" alt="Alex the Husky"/></a>
<a href="index2.html" title="Felix the CSS/SVG Fox"><img src="img/link-fox.png" alt="Felix the Fox"/></a>
</nav>
<p class="info">Please view on a desktop <br/>(Chrome only)</p>
</header>
<div class="content content--husky">
<div class="mountain"></div>
<div class="mountain"></div>
<div class="husky">
<div class="husky-mane">
<div class="husky-coat"></div>
</div>
<div class="husky-body">
<div class="husky-head">
<div class="husky-ear"></div>
<div class="husky-ear"></div>
<div class="husky-face">
<div class="husky-eye"></div>
<div class="husky-eye"></div>
<div class="husky-nose"></div>
<div class="husky-mouth">
<div class="husky-lips"></div>
<div class="husky-tongue"></div>
</div>
</div>
</div>
<div class="husky-torso"></div>
</div>
<div class="husky-legs">
<div class="husky-front-legs">
<div class="husky-leg"></div>
<div class="husky-leg"></div>
</div>
<div class="husky-hind-leg">
</div>
</div>
<div class="husky-tail">
<div class="husky-tail">
<div class="husky-tail">
<div class="husky-tail">
<div class="husky-tail">
<div class="husky-tail">
<div class="husky-tail"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
</defs>
</svg>
</div><!-- /content -->
</div><!-- /container -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
HTML5 SVG卡通小动物动画特效.zip
版权申诉
125 浏览量
2022-11-18
22:13:23
上传
评论
收藏 244KB ZIP 举报
HTML5 SVG卡通小动物动画特效.zip （18个子文件） 
HTML5 SVG卡通小动物动画特效 jiaoben4103 css 
zzsc-demo.css 4KB husky.css.map 15KB husky.css 52KB fox.css 38KB fox.css.map 8KB normalize.css 2KB img 
link-fox.png 3KB link-husky.png 2KB
landscape.jpg 207KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB index2.html 3KB scss __svg.scss 1KB fox.scss 12KB husky.scss 17KB资源评论
