svg+css实现带下雪背景的圣诞节动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现带下雪背景的圣诞节动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
<style>
      @keyframes twinkle {
	0%,100% {
	opacity:1;
}
50% {
	opacity:0;
}
}@keyframes snowfall {
	0% {
	transform:translate(0px,0px);
	opacity:1;
}
100% {
	opacity:0;
	transform:translate(80px,150px);
}
}@keyframes lightson {
	from {
	opacity:0;
}
to {
	opacity:1;
}
}@keyframes dimlight {
	0%,100% {
	opacity:1;
}
50% {
	opacity:0.95;
}
}@keyframes sleighpath {
	0% {
	opacity:0;
	transform:translate(-3000px,1000px);
}
30% {
	opacity:1;
	transform:translate(0,0px);
}
31% {
	opacity:1;
	transform:translate(0px,0px);
}
35% {
	opacity:1;
	transform:translate(0,-5px);
}
40% {
	opacity:1;
	transform:translate(0,5px);
}
45% {
	opacity:1;
	transform:translate(0,0);
}
50% {
	opacity:1;
	transform:translate(0,5px);
}
55% {
	opacity:1;
	transform:translate(0,0);
}
60% {
	opacity:1;
	transform:translate(0,5px);
}
65% {
	opacity:1;
	transform:translate(0,0);
}
70% {
	opacity:1;
	transform:translate(0,5px);
}
75% {
	opacity:1;
	transform:translate(0,0);
}
80% {
	opacity:1;
	transform:translate(0,0);
}
100% {
	opacity:0;
	transform:translate(3000px,-1000px);
}
}#moon {
	animation:dimlight 4s ease infinite;
}
#Layer_15,#OBJECTS {
	opacity:0;
	animation:lightson 1s ease 5s forwards;
}
#star1 {
	animation:twinkle 2s ease infinite;
}
#star2 {
	animation:twinkle 4s ease 1s infinite;
}
#star3 {
	animation:twinkle 4s ease 0.5s infinite;
}
#star4 {
	animation:twinkle 3s ease 2s infinite;
}
#sleigh {
	opacity:0;
	animation:sleighpath 5s ease 1s forwards;
}
#snow1 {
	animation:snowfall 2s infinite;
}
#snow2 {
	animation:snowfall 1s  0.25s infinite;
}
#snow3 {
	animation:snowfall 1s  0.5s infinite;
}
#snow4 {
	animation:snowfall 1s  1s infinite;
}
#snow5 {
	animation:snowfall 2s 1.25s infinite;
}
#snow6 {
	animation:snowfall 1.5s 1.5s infinite;
}
#snow7 {
	animation:snowfall 0.5s  0.4s infinite;
}
#snow8 {
	animation:snowfall 0.5s 1s infinite;
}
#snow9 {
	animation:snowfall 1.5s 0.5s infinite;
}
#snow10 {
	animation:snowfall 1.5s 1s infinite;
}
#snow11 {
	animation:snowfall 0.5s 0.25s infinite;
}
.container-svg {
	width:100%;
	overflow:hidden;
}
@media screen and (max-width:700px) {
	.container-svg {
	text-align:center;
	height:100vh;
}
.container-svg >svg {
	height:100vh;
}
}
</style>
</head>

<body>
    <div class="container-svg">
        <?xml version="1.0" encoding="utf-8" ?>
        <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 800" style="enable-background:new 0 0 1200 800;" xml:space="preserve"><style type="text/css">.st0{fill:#BE1E2D;}    .st1{fill:#C41C30;}    .st2{fill:#CC172D;}    .st3{fill:#D31132;}    .st4{fill:#DD0A2D;}    .st5{fill:#EF003F;}    .st6{fill:#FFFFFF;}    .st7{opacity:0.4;}    .st8{opacity:0.4;fill:#FFFFFF;}    .st9{fill:#FFFAD7;}    .st10{fill:#F2E69E;}    .st11{fill:#B7162A;}    .st12{fill:#1A4D89;}    .st13{fill:#231F20;}    .st14{font-family:'MountainsofChristmas-Regular';}    .st15{font-size:75.9231px;}    .st16{fill:#4B4B4B;}</style><g id="BACKGROUND"><g><rect x="-851.1" class="st0" width="800" height="800" /><path class="st1" d="M-112.4,0c0,0,54.8,63.3,61.3,116.2l0.2,130.9c0,0-14.3,185.7-145,275.8s-379.5,76.9-424.9,73.1			c-45.4-3.7-168-124.5-179.1-143c-11.1-18.5-51.2-110.6-51.2-110.6V0H-112.4z" /><path class="st2" d="M-176.9,0c3.3,0,70.8,90.3,63.3,190.4c-7.5,100.1-75.6,197.4-91.8,226s-111.7,105.8-177.2,122.7			s-259.1-70.3-310.8-110.7C-745,388-802.8,262.2-811.4,187.1S-759.8,0-759.8,0H-176.9z" /><path class="st3" d="M-215.1,81.9c0,0,16.3,98.4,7.2,161.8s-137.3,194.8-210.5,195.8c-73.1,1-301.1-103.2-312.4-190.6			c-11.2-87.4,41.7-180,61.2-208.2S-606.1,0-606.1,0H-280C-280,0-221.1,35.2-215.1,81.9z" /><path class="st4" d="M-404,10.2c0,0,113.8,7.3,143.9,129.6C-230,262-302.8,335-393.5,380.7c-90.8,45.6-255-71.2-272-152.7			C-682.6,146.5-626.6-10.5-404,10.2z" /><path class="st5" d="M-417.8,44.5c7,0.8,88.8,35.1,107.5,71.2c18.7,36.1,12.7,108.7,0,145.7c-12.7,37-73.1,88.8-112.5,91.7			c-39.5,2.9-170-47.4-187-80.9c-16.9-33.5-7.3-106.8,9.9-141.4C-582.7,96.3-532.5,31.4-417.8,44.5z" /><circle class="st6" cx="-783.1" cy="56.4" r="2" /><circle class="st6" cx="-735.6" cy="43.4" r="5.5" /><circle class="st6" cx="-697.1" cy="51.4" r="2.5" /><circle class="st6" cx="-671.3" cy="86.2" r="1.8" /><circle class="st6" cx="-644.8" cy="116.2" r="3.3" /><circle class="st6" cx="-786.6" cy="173.4" r="2" /><circle class="st6" cx="-749.8" cy="166.7" r="1.7" /><circle class="st6" cx="-694.6" cy="121.9" r="2.5" /><circle class="st6" cx="-574.9" cy="40.7" r="2.8" /><circle class="st6" cx="-573.2" cy="97.2" r="1.8" /><circle class="st6" cx="-677.3" cy="188.1" r="3.3" /><circle class="st6" cx="-665.8" cy="259.7" r="3.8" /><circle class="st6" cx="-760.7" cy="291.5" r="2.9" /><circle class="st6" cx="-727.3" cy="276.2" r="2.8" /><circle class="st6" cx="-811.4" cy="347.1" r="4.7" /><circle class="st6" cx="-805.2" cy="305.9" r="1.5" /><circle class="st6" cx="-718.6" cy="405.9" r="2" /><circle class="st6" cx="-693.3" cy="427.2" r="1.3" /><circle class="st6" cx="-805.5" cy="453" r="5.6" /><circle class="st6" cx="-765.6" cy="438" r="1.5" /><circle class="st6" cx="-736.1" cy="442.5" r="3" /><circle class="st6" cx="-585.6" cy="408.4" r="2.5" /><circle class="st6" cx="-578" cy="403.4" r="3.4" /><circle class="st6" cx="-602.1" cy="457" r="4" /><circle class="st6" cx="-557.5" cy="492.9" r="1.9" /><ellipse class="st6" cx="-651.1" cy="370.7" rx="0" ry="2.3" /><circle class="st6" cx="-649.1" cy="480.9" r="2" /><circle class="st6" cx="-404.3" cy="382.2" r="4.3" /><circle class="st6" cx="-376.7" cy="364.3" r="1.9" /><circle class="st6" cx="-385.6" cy="463.9" r="3" /><circle class="st6" cx="-368.6" cy="484.9" r="2.5" /><circle class="st6" cx="-503.5" cy="424.4" r="5" /><circle class="st6" cx="-199.2" cy="335.8" r="3.4" /><circle class="st6" cx="-225.1" cy="413.4" r="3" /><circle class="st6" cx="-193.3" cy="426.1" r="1.7" /><ellipse class="st6" cx="-168.5" cy="456.7" rx="0" ry="0.8" /><circle class="st6" cx="-284.3" cy="325.7" r="3.8" /><circle class="st6" cx="-132.1" cy="255.9" r="3.5" /><circle class="st6" cx="-97.2" cy="284.5" r="4.6" /><ellipse class="st6" cx="-73.1" cy="334.1" rx="0" ry="1.7" /><circle class="st6" cx="-112.4" cy="383.4" r="1.2" /><circle class="st6" cx="-258.6" cy="245.4" r="3.5" /><circle class="st6" cx="-304.6" cy="43.9" r="3.5" /><ellipse class="st6" cx="-282.5" cy="47.4" rx="1.9" ry="0" /><circle class="st6" cx="-159.1" cy="37.9" r="2.5" /><circle class="st6" cx="-126.5" cy="65.3" r="2.1" /><circle class="st6" cx="-102.1" cy="84.9" r="2.5" /><circle class="st6" cx="-113.6" cy="150.4" r="4" /><circle class="st6" cx="-99" cy="157.2" r="2.8" /><circle class="st6" cx="-136.7" cy="123.6" r="1.9" /><ellipse class="st6" cx="-284.3" cy="86.4" rx="0" ry="4" /><circle class="st6" cx="-472.1" cy="34.9" r="3" /><circle class="st6" cx="-426.3" cy="28.7" r="2.3" /><circle class="st6" cx="-355.5" cy="19.7" r="3.3" /><circle class="st6" cx="-339.1" cy="81.9" r="2.5" /><circle class="st6" cx="-650.1" cy="14.4" r="2" /><circle class="st6" cx="-94.9" cy="346.2" r="2.3" /><circle class="st6" cx="-75.2" cy="420.4" r="4" /><circle class="st6" cx="-107.1" cy="459.9" r="2.5" /><circle class="st6" cx="-152.6" cy="468.5" r="1.5" /><ellipse class="st6" cx="-328.1" cy="512.9" rx="0" ry="1.5" />
        <g class="st7"><g><polygon class="st6" points="-268,531 -254.6,531 -254.6,519.8 -244.2,519.8 -244.2,531 -234.8,531 -201.5,531 -189.4,554.9					-195.4,554.9 -195.4,582.5 -234.8,582.5 -274.1,582.5 -274.1,554.9 -280.2,554.9 				" /></g><g><g><rect x="-223.4" y="554.8" class="st0" width="14.3" height="14.3" /></g><g><rect x="-216.7" y="554.8" class="st6" width="0.9" height="14.3" /></g><g><rect x="-223.4" y="561.5" class="st6" width="14.3" height="0.9" /></g></g><g><g><rect x="-257.5" y="554.8" class="st0" width="14.3" height="14.3" /></g><g><rect x="-250.8" y="554.8" class="st6" width="0.9" height="14.3" /></g><g><rect x="-257.5" y="561.5" class="st6" width="14.3" height="0.9" /></g></g></g><g class="st7"><g><polygon class="st6" points="-833.2,522.1 -819.7,522.1 -819.7,510.9 -809.3,510.9 -809.3,522.1 -799.9,522.1 -766.7,522.1					-754.5,546 -760.6,546 -760.6,573.6 -799.9,573.6 -839.3,573.6 -839.3,546 -845.3,546 				" /></g><g><g><rect x="-788.6" y="545.8" class="st0" width="14.3" height="14.3" /></g><g><rect x="-781.9" y="545.8" class="st6" width="0.9" height="14.3" /></g><g><rect x="-788.6" y="552.5" class="st6" width="14.3" height="0.9" /></g></g><g><g><rect x="-822.6" y="545.8" class="st0" width="14.3" height="14.3" /></g><g><rect x="-815.9" y="545.8" class="st6" width="0.9" height="14.3" /></g><g><rect x="-822.6" y="552.5" class="st6" width="14.3" height="0.9" /></g></g></g><g class="st7"><g><polygon class="st6" points="-553.7,562.9 -541.3,562.9 -541.3,552.5 -531.7,552.5 -531.7,562.9 -523,562.9 -492.4,562.9					-481.2,584.8 -486.8,584.8 -486.8,610.3 -523,610.3 -559.3,610.3 -559.3,584.8 -564.9,584.8 				" /></g><g><g><rect x="-512.6" y="584.7" class="st0" width="13.2" height="13.2" /></g><g><rect x="-506.4" y="584.7" class="st6" width="0.8" height="13.2" /></g><g><rect x="-512.6" y="590.9" class="st6" width="13.2" height="0.8" /></g></g><g><g><rect x="-543.9" y="584.7" class="st0" width="13.2" height="13.2" /></g><g><rect x="-537.8" y="584.7" class="st6" width="0.8" height="13.2" /></g><g><rect x="-543.9" y="590.9" class="st6" width="13.2" height="0.8" /></g></g></g><path class="st8" d="M-460.8,608.9l10.2-22l-7.3,4.2l9-20.5l-4.7,2.8l12.3-25.7l13.5,26l-6.8-3.3l11.8,20.7l-7.8-5l10,22.5			l-16.2-5.5c0,0-0.1,0-0.3,0.1v14.2c0,0-2.9,2.1-6.1,0v-11.2c-3.5,1.7-7.2,3.5-7.4,3.6c-0.5,0.2,1.7-5.3,1.7-5.3L-460.8,608.9z" /><path class="st8" d="M-690.5,566.2l10.2-22l-7.3,4.2l9-20.5l-4.7,2.8L-671,505l13.5,26l-6.8-3.3l11.8,20.7l-7.8-5l10,22.5			l-16.2-5.5c0,0-0.1,0-0.3,0.1v14.2c0,0-2.9,2.1-6.1,0v-11.2c-3.5,1.7-7.2,3.5-7.4,3.6c-0.5,0.2,1.7-5.3,1.7-5.3L-690.5,566.2z" /><path class="st8" d="M-97,572.5l8.4-18.1l-6,3.4l7.4-16.9l-3.8,2.3l10.2-21.1l11.1,21.4l-5.6-2.7l9.7,17l-6.5-4.1l8.2,18.5			l-13.3-4.5c0,.........完整代码请登录后点击上方下载按钮下载查看