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