svg实现藏在圣诞树中的小猫咪效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg实现藏在圣诞树中的小猫咪效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900");
	/* Color Palette *//* General Styles */body {
	background:#171E2B;
	font-family:'Source Sans Pro',sans-serif;
}
.sections,footer {
	padding:40px 12vw;
}
@media (min-width:960px) {
	.sections,footer {
	padding:40px calc( (100% - 600px)/2 );
}
}.container {
	width:100%;
}
svg {
	width:100%;
	max-height:100vh;
}
#cat {
	opacity:0;
	cursor:pointer;
}
.shadow-2,.shadow-1 {
	opacity:0;
}
/* Footer */footer {
	background-color:#39445B;
	color:white;
}
.footer__title {
	font-weight:bold;
	font-size:30px;
	margin-top:40px;
}
.footer__subtitle {
	font-size:22px;
	color:#FFDF9F;
}
.footer__parragraph,.footer__list,.copyright {
	line-height:1.5em;
	font-size:22px;
}
.footer__parragraph a,.footer__list a,.copyright a {
	color:#42CE8E;
}
.copyright {
	text-align:center;
	border-top:1px dashed rgba(255,255,255,0.15);
	padding:10px 0;
	margin:40px auto;
}

</style>
</head>

<body>
    <div class="container"><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 520 390"><g id="tree"><ellipse id="tree-base" fill="#39445B" cx="259.5" cy="319" rx="120" ry="38" /><path id="tree-par-1" fill="#42CE8E" d="M260,185c0,0,2.5-0.8,6.7,2.6c4.3,3.4,121.1,81.2,121.1,81.2s4,3.9,1.6,9.6		C387,284,383,286,383,286s-49,41-123,41c-76,0-123-42.2-123-42.2s-6.1-2.8-6.5-6.8s-0.4-7.3,2.6-10.1c3-2.9,120.1-80.1,120.1-80.1		S255,185,260,185z" /><path id="tree-part-1-shadow" fill="#09B56B" d="M357.3,248.4c-16-10.7-35.8-23.9-52.8-35.3c-11.4,2.1-26.3,3.9-44.5,3.9		c-17.3,0-32.5-2-44.5-4.4c-17.1,11.3-37.1,24.6-53.1,35.3c13.3,7.4,50.1,25.1,97.7,25.1C309.2,273,344.3,255.9,357.3,248.4z" /><path id="tree-part-2" fill="#42CE8E" d="M260,123c0,0,2.5-0.8,6.7,2.6c4.3,3.4,101.1,93.2,101.1,93.2s4,3.9,1.6,9.6		s-6.5,6.6-6.5,6.6S323,263,260,263c-60,0-103-28.2-103-28.2s-6.1-2.8-6.5-6.8c-0.4-4-0.4-7.3,2.6-10.1c3-2.9,100.1-92.1,100.1-92.1		S255,123,260,123z" /><path id="tree-part-2-shadow" fill="#09B56B" d="M187,194.8c0,0,30,12.2,73,12.2c48,0,72.9-12,72.9-12s2.7-0.7,5-3.9		c-12.5-11.6-27.1-25.1-39.8-36.8c-6.4,1.5-19.3,3.7-38.1,3.7c-18.4,0-31.2-2.3-37.8-3.8c-12.8,11.8-27.6,25.4-40.2,36.9		C184,193.3,187,194.8,187,194.8z" /><path id="tree-part-3" fill="#42CE8E" d="M260,107c0,0,2.5-0.8,6.7,2.6c4.3,3.4,71.1,59.2,71.1,59.2s4,3.9,1.6,9.6		s-6.5,6.6-6.5,6.6S308,197,260,197c-43,0-73-12.2-73-12.2s-6.1-2.8-6.5-6.8c-0.4-4-0.4-7.3,2.6-10.1c3-2.9,70.1-58.1,70.1-58.1		S255,107,260,107z" /><path id="tree-part-3-shadow" fill="#09B56B" d="M260,148c28,0,42.9-5,42.9-5s1.1-0.3,2.5-1.3c-17.7-14.7-36.4-30.3-38.6-32.1		c-4.3-3.4-6.7-2.6-6.7-2.6c-5,0-6.9,2.8-6.9,2.8s-19.8,16.3-38.4,31.7c1.2,0.8,2.3,1.3,2.3,1.3S232,148,260,148z" /><path id="tree-part-4" fill="#42CE8E" d="M260,75c0,0,2.5-0.8,6.7,2.6c4.3,3.4,41.1,41.2,41.1,41.2s4,3.9,1.6,9.6s-6.5,6.6-6.5,6.6		s-14.9,5-42.9,5s-43-5.2-43-5.2s-6.1-2.8-6.5-6.8s-0.4-7.3,2.6-10.1c3-2.9,40.1-40.1,40.1-40.1S255,75,260,75z" /></g><g id="gifts"><g id="gift-yellow"><polygon id="gift-yelow-side-shadow" fill="#FFC84D" points="196,345 176,339 176,319 196,323 		" /><polygon id="gift-yellow-side" fill="#FFDF9F" points="216,339 196,345 196,323 216,319 		" /><polygon id="gift-yellow-top" fill="#FFDF9F" points="174,315 196,311 218,315 196,319 		" /><polygon id="gift-yellow-top-shadow" fill="#FFC84D" points="174,315 174,319 196,323 218,319 218,315 196,319 		" /><path id="gift-yellow-bow" fill="#D10F50" d="M188.7,313.5c-0.6-0.4-1.2-0.9-1.6-1.5s-0.5-1.5-0.2-2.1c0.4-0.8,1.3-1.2,2.2-1.3			c1.8-0.2,3.8,0.6,4.7,2.2c0.8,1.2,0.9,2.7,1,4.1c-0.1-1.4-0.1-2.9,0.3-4.3s1.4-2.7,2.8-3.1c0.5-0.1,1-0.2,1.5-0.2			c1.2,0,2.5,0.3,3,1.4c0.2,0.5,0.2,1.2,0,1.7C201.1,316.4,193,316.2,188.7,313.5z" /></g><g id="gift-red"><polygon id="gift-red-side-shadow" fill="#D10F50" points="335,345 315,339 315,319 335,323 		" /><polygon id="gift-red-side" fill="#DD4E85" points="355,339 335,345 335,323 355,319 		" /><polygon id="gift-red-top" fill="#DD4E85" points="313,315 335,311 357,315 335,319 		" /><polygon id="gift-red-top-shadow" fill="#D10F50" points="313,315 313,319 335,323 357,319 357,315 335,319 		" /><path id="gift-red-bow" fill="#D10F50" d="M327.7,313.5c-0.6-0.4-1.2-0.9-1.6-1.5c-0.4-0.6-0.5-1.5-0.2-2.1			c0.4-0.8,1.3-1.2,2.2-1.3c1.8-0.2,3.8,0.6,4.7,2.2c0.8,1.2,0.9,2.7,1,4.1c-0.1-1.4-0.1-2.9,0.3-4.3c0.4-1.4,1.4-2.7,2.8-3.1			c0.5-0.1,1-0.2,1.5-0.2c1.2,0,2.5,0.3,3,1.4c0.2,0.5,0.2,1.2,0,1.7C340.1,316.4,332,316.2,327.7,313.5z" /></g></g><g id="Lights"><circle id="l1-r4-s2" class="shadow-2" opacity="0.5" fill="#FFDF9F" cx="146" cy="256" r="15" /><circle id="l1-r4-s1" class="shadow-1" opacity="0.5" fill="#FFDF9F" cx="146" cy="256" r="10" /><circle id="l1-r4" fill="#FFDF9F" cx="146" cy="256" r="5" /><circle id="l2-r4-s2" class="shadow-2" opacity="0.5" fill="#FFDF9F" cx="196" cy="286" r="15" /><circle id="l2-r4-s1" class="shadow-1" opacity="0.5" fill="#FFDF9F" cx="196" cy="286" r="10" /><circle id="l2-r4" fill="#FFDF9F" cx="196" cy="286" r="5" /><circle id="l3-r4-s2" class="shadow-2" opacity="0.5" fill="#FFDF9F" cx="370" cy="256" r="15" /><circle id="l3-r4-s1" class="shadow-1" opacity="0.5" fill="#FFDF9F" cx="370" cy="256" r="10" /><circle id="l3-r4" opacity="0.5" fill="#FFDF9F" cx="370" cy="256" r="5" /><circle id="l4-r4-s2" class="shadow-2" opacity="0.5" fill="#FFDF9F" cx="320" cy="286" r="15" /><circle id="l4-r4-s1" class="shadow-1" opacity="0.5" fill="#FFDF9F" cx="320" cy="286" r="10" /><circle id="l4-r4" fill="#FFDF9F" cx="320" cy="286" r="5" /><circle id="l5-r4-s2" class="shadow-2" opacity="0.5" fill="#FFDF9F" cx="260" cy="296" r="15" /><circle id="l5-r4-s1" class="shadow-1" opacity="0.5" fill="#FFDF9F" cx="260" cy="296" r="10" /><circle id="l5-r4" fill="#FFDF9F" cx="260" cy="296" r="5" /><circle id="l1-r3-s2" class="shadow-2" opacity="0.5" fill="#FFDF9F" cx="196" cy="216" r="15" /><circle id="l1-r3-s1" class="shadow-1" opacity="0.5" fill="#FFDF9F" cx="196" cy="216" r="10" /><circle id="l1-r3" fill="#FFDF9F" cx="196" cy="216" r="5" /><circle id="l2-r3-s2" class="shadow-2" opacity="0.5" fill="#FFDF9F" cx="320" cy="216" r="15" /><circle id="l2-r3-s1" class="shadow-1" opacity="0.5" fill="#FFDF9F".........完整代码请登录后点击上方下载按钮下载查看