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

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

代码语言：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-.........完整代码请登录后点击上方下载按钮下载查看