svg+css实现可爱小猫咪送信通知消息效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现可爱小猫咪送信通知消息效果代码，小猫咪手拿信件，左边耳朵上有消息数量显示，砸一砸眼睛。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100vw;
            height: 100vh;
            background: #8C858E;
        }
        
        #left-eye, #right-eye {
              animation: open-eye 2s infinite forwards;
              animation-delay: 2s;
              opacity: 0;
        }
        
        #letter, #rigth-arm {
          animation: move 3s infinite alternate ease-in-out;
           animation-delay: 2s;
        }
        
        @keyframes open-eye {
          50% {
            opacity: 0;
          }
           55% {
            opacity: 0.9;
          }
          60% {
            opacity: 1;
          }
          100% {
            opacity: 1;
          }
        }
           
        @keyframes move {
          to {
          transform: rotate(3deg);
          }
          }
    </style>


</head>

<body>
    <div class="container">

        <svg width="277" height="258" viewBox="0 0 277 258" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 122">
<g id="Group 109">
<g id="tail">
<path id="Ellipse 50" d="M253.402 216.955C252.314 225.354 217.636 238.668 205.272 237.067C192.908 235.466 183.766 227.359 184.853 218.96C185.941 210.562 196.846 205.051 209.21 206.652C225.371 219.052 254.489 208.556 253.402 216.955Z" fill="#DF9819"/>
<path id="Ellipse 51" d="M265.087 201.131C267.435 206.967 246.113 229.686 236.111 233.712C226.108 237.737 216.096 236.269 213.747 230.433C211.399 224.597 217.603 216.602 227.605 212.577C244.576 213.933 262.738 195.295 265.087 201.131Z" fill="#561EB0"/>
</g>
<ellipse id="Ellipse 48" cx="109.5" cy="239" rx="15.5" ry="19" fill="#FAA918"/>
<ellipse id="Ellipse 52" cx="160.5" cy="239" rx="15.5" ry="19" fill="#FAA918"/>
<path id="Ellipse 43" d="M60.6651 210.342C62.5929 172.125 84.5288 138.017 131.861 140.405C179.193 142.792 211.22 173.391 209.292 211.608C207.365 249.826 173.842 248.869 126.51 246.482C79.1779 244.094 58.7372 248.56 60.6651 210.342Z" fill="#FAA918"/>
<path id="Ellipse 42" d="M231 116.5C231 162.616 187.795 181.5 134.5 181.5C81.2045 181.5 38 162.616 38 116.5C38 70.3844 81.2045 33.0002 134.5 33.0002C187.795 33.0002 231 70.3844 231 116.5Z" fill="#FAA918"/>
<path id="Vector 13" d="M186.625 48.5212C176.987 33.4464 221.171 27.1266 244.467 25.851C267.081 36.2775 246.639 78.1807 233.591 97.8291C224.34 104.659 196.262 63.596 186.625 48.5212Z" fill="#561EB0"/>
<path id="Vector 15" d="M189.182 53.9322C181.575 42.2261 213.334 39.3096 230.164 39.3146C246.982 48.0696 233.899 78.6591 225.254 92.8594C218.832 97.6011 196.788 65.6384 189.182 53.9322Z" fill="#DF9819"/>
<path id="Vector 16" d="M51.2364 85.1514C41.1081 94.7572 33.0793 64.5664 30.331 48.2702C36.0853 30.3106 67.9436 37.1222 83.1535 42.773C88.8107 48.0838 61.3647 75.5455 51.2364 85.1514Z" fill="#D9CEBB"/>
<path id="Vector 14" d="M44.6471 90.8753C30.0671 101.246 21.571 57.4288 19.1454 34.2238C28.4413 11.1229 71.3038 29.4683 91.5731 41.5286C98.8523 50.4316 59.227 80.5046 44.6471 90.8753Z" fill="#561EB0"/>
<path id="Vector 17" d="M49.8917 86.7269C38.2693 94.4595 35.2589 63.0292 35.2066 46.3474C43.8611 29.5332 74.3442 41.9967 88.5039 50.3303C93.244 56.6181 61.5142 78.9942 49.8917 86.7269Z" fill="#DF9819"/>
<path id="nose" d="M147.604 119.996C147.357 117.789 144.023 116.35 140.157 116.783C136.291 117.215 132.2 119.484 132.447 121.691C132.694 123.898 137.533 127.071 141.399 126.639C145.265 126.207 147.851 122.203 147.604 119.996Z" fill="#00044A"/>
<g id="Group 105">
<path id="Vector 25" d="M211.283 112L254.283 108" stroke="black" stroke-width="2"/>
<path id="Vector 26" d="M212.284 116.111L264.507 125.72" stroke="black" stroke-width="2"/>
<path id="Vector 27" d="M211 122.213L249.73 133.303" stroke="black" stroke-width="2"/>
</g>
<g id="Group 106">
<path id="Vector 28" d="M70.408 116L27.408 112" stroke="black" stroke-width="2"/>
<path id="Vector 29" d="M70.2238 120.622L18 130.231" stroke="black" stroke-width="2"/>
<path id="Vector 30" d="M69.7294 127.946L31 139.035" stroke="black" stroke-width="2"/>
</g>
<path id="Vector 23" d="M106.422 74.122C101.61 73.9659 98.6602 50.6557 97.787 39.02C98.2136 35.2221 117.19 33.5081 126.625 33.1258C121.896 46.8562 111.235 74.278 106.422 74.122Z" fill="#DF9819"/>
<path id=&quo.........完整代码请登录后点击上方下载按钮下载查看