<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5+SVG棒棒糖山林雪景</title>
<style>
body {
margin-left: auto;
margin-right: auto;
max-width: 1400px;
overflow: hidden;
}
svg {
background-color: #222;
}
#moon {
fill: #ffff33;
}
#merry {
display: none;
position: absolute;
top: 0;
left: 50%;
color: #ff0000;
text-shadow: 1px 1px 4px #339933;
}
#moonPath {
display: none;
}
.container {
outline: 2px solid #008000;
border: 5px solid #b30000;
overflow: hidden;
}
.snow {
height: 200%;
width: 100%;
background: url("images/White-Snow-PNG.png");
background-size: 30%;
position: absolute;
top: -100%;
left: 0;
}
.santa {
width: 5%;
position: absolute;
top: 10px;
left: -195px;
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src='js/MorphSVGPlugin.min.js?r=1899'></script>
<div class='container'>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Winter-Land" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">
<style type="text/css">
.st0 {
clip-path: url(#XMLID_520_);
}
.st1 {
fill: #C7DDF2;
stroke: #8D90A8;
stroke-miterlimit: 10;
}
.st2 {
fill: #C7DDF2;
}
.st3 {
fill: #FFFFFF;
stroke: #D3D2E0;
stroke-miterlimit: 10;
}
.st4 {
fill: #E6E7E8;
}
.st5 {
fill: #93A5B7;
}
.st6 {
fill: url(#XMLID_527_);
}
.st7 {
fill: #C69C6D;
stroke: #000000;
stroke-miterlimit: 10;
}
.st8 {
fill: #FFFFFF;
stroke: #000000;
stroke-miterlimit: 10;
}
.st9 {
fill: #47D33C;
stroke: #000000;
stroke-miterlimit: 10;
}
.st10 {
opacity: 0.28;
fill: #C7B299;
enable-background: new;
}
.st11 {
fill: #EAE9E6;
}
.st12 {
fill: #B88147;
}
.st13 {
fill: #E6E3DD;
}
.st14 {
fill: #E6E6E6;
stroke: #B3B3B3;
stroke-width: 0.5;
stroke-miterlimit: 10;
}
.st15 {
fill: #EC7974;
stroke: #EC7974;
stroke-miterlimit: 10;
}
.st16 {
fill: #80AD80;
}
.st17 {
fill: none;
stroke: #D9D8D3;
stroke-width: 5;
stroke-miterlimit: 10;
}
.st18 {
fill: #EC7974;
}
.st19 {
fill: none;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
.st20 {
fill: none;
stroke: #D9D8D3;
stroke-width: 7;
stroke-miterlimit: 10;
}
.st21 {
fill: #EAE9E6;
stroke: #D9D8D3;
stroke-width: 7;
stroke-miterlimit: 10;
}
.st22 {
fill: none;
stroke: #eaeae9;
stroke-width: 6;
stroke-miterlimit: 10;
}
.st23 {
fill: #D9D8D3;
}
.st24 {
fill: #7FB145;
}
.st25 {
fill: #FBCF03;
}
.st26 {
fill: #B41D27;
}
.st27 {
fill: #08A0D2;
}
.st28 {
fill: #EF6E2B;
}
.st29 {
fill: #EFC325;
}
.st30 {
fill: #86BB82;
}
.st31 {
fill: #EBCB3D;
}
.st32 {
fill: #82657E;
}
.st33 {
fill: #C34241;
}
.st34 {
fill: #EA7B39;
}
.st35 {
fill: #81B978;
}
.st36 {
fill: #C7544E;
}
.st37 {
fill: #6FAB47;
}
.st38 {
fill: #DC7520;
}
.st39 {
fill: #C1272D;
stroke: #000000;
stroke-miterlimit: 10;
}
.st40 {
fill: url(#XMLID_533_);
stroke: #CCCCCC;
stroke-width: 0.25;
stroke-miterlimit: 10;
}
.st41 {
fill: url(#XMLID_539_);
stroke: #E6E6E6;
stroke-miterlimit: 10;
}
.st42 {
fill: url(#XMLID_556_);
}
.windows {
fill: #555;
}
</style>
<g id="XMLID_516_">
<defs>
<rect id="XMLID_509_" x="0.6" width="959.4" height="560" />
</defs>
<clipPath id="XMLID_520_">
<use xlink:href="#XMLID_509_" style="overflow:visible;" />
</clipPath>
<circle id="moon" cx="50" cy="80" r="26" />
<path id="moonPath" class="st0" d="M-2-1.1C4.9,8.7,13,17.6,22,25.5c8.3,7.3,17.5,13.8,25.2,21.8c6.6,6.8,12,14.7,17.4,22.5
c20.5,29.7,41,59.5,61.6,89.2" />
<g id="mountains" class="st0">
<path id="XMLID_22_" class="st1" d="M564.8,293.5c67.3,62.1-347.7,106.4-439.3,106.4s-330.5-226-239.1-227.7
c157-2.8,233-204.7,325.1-195.8C305.9-14.3,508.4,241.5,564.8,293.5z" />
<path id="XMLID_21_" class="st2" d="M1089.9,189.5c104.6-0.9-157,144.2-252.8,144.2s-400,96.4-400-8.5S627.9-0.8,723.1,5
C845.6,12.5,960,190.6,1089.9,189.5z" />
<path id="XMLID_20_" class="st3" d="M229.5,104.8L193,130.6c-11.6,4.1-33.6,20.7-46.7,27.8c-4.8,2.6-22.6,4-32.9,3.1
c-7.1-0.6-13.9-12.2-17-23.3c-1.1-4-1.4-8.2-0.8-12.3c1.2-7.9-1.2-16-6.6-21.9L65.7,78.4c-1.5-7.9,9.6-18.2,19.6-27L123,17.8
c2.9-8.7,47.4-35,56.2-37.2l25.5-5.9c10.9-2.8,43.2,3.8,50.6,12.3l45.5,36.5c7.1,5.7,29.1,15.7,60.5,52.9
c8.5,10.1,43.8,36.2,42.9,45.8l-40.1,20.5c-10.7,5.5-23.5,5.3-34-0.5c-21-11.5-55.1-31.1-73-38.6
C248.1,99.7,238,100.2,229.5,104.8z" />
<path id="XMLID_19_" class="st3" d="M770.8,171.5l-15.1-13.1c-9,1.8-53-35.4-59-42.3l-108,38.5c-5.6,2-11.6,2.3-17.3,0.9
c-14.9-3.6-47.8-3.4-45.3-10.6l59-68.1c3-8.7,60.6-55,69.6-56.7l57.8-17.9c8.9-1.8,55.7,5.3,62,12.2c0,0,16,6.5,16.1,6.5
l36.2,18.3c6,6.9,52.6,34.8,49.6,43.5L829,151.3c-1.9,5.6-16.7,16-29.3,23.1C790.4,179.7,778.9,178.5,770.8,171.5z" />
<path id="XMLID_18_" class="st4" d="M795.6,130c11,0.3,10.2,19,4.4,25.3c-5.8,6.2-22.3,8-25.4-2.7c-4.
HTML5+SVG实现的圣诞夜棒棒糖山林雪景动画效果源码.zip
版权申诉
51 浏览量
2022-11-03
23:51:49
上传
评论
收藏 206KB ZIP 举报
HTML5+SVG实现的圣诞夜棒棒糖山林雪景动画效果源码.zip （6个子文件） 
132686862274318019 images 
Santa-Claus-Sleigh-PNG.png 34KB White-Snow-PNG.png 70KB
index.html 145KB js 
MorphSVGPlugin.min.js 26KB jquery-1.11.1.min.js 94KB TweenMax.min.js 109KB资源评论
