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

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

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