svg+css实现可爱五角星左右摇晃动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现可爱五角星左右摇晃动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: #060d31;
}
</style>

  
</head>

<body translate="no">
  <svg width="50%" height="50%" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">

  <style>
    #Star_Frame {
      transform-origin: 22% bottom;
      transform-box: fill-box;
      animation: starWalk 1500ms ease-in-out infinite;
    }

    #Eye_Left,
    #Eye_Right {
      transform-origin: center bottom;
      transform-box: fill-box;
      animation: eyeBlink 1500ms linear infinite;
    }

    @keyframes eyeBlink {
      0% {
        transform: scale(1, 1);
      }

      31% {
        transform: scale(1, 1);
      }

      35% {
        transform: scale(2, 0.05);
      }

      39% {
        transform: scale(2, 0.05);
      }

      43% {
        transform: scale(0.7, 1.2);
      }

      47% {
        transform: scale(1, 1);
      }

      71% {
        transform: scale(1, 1);
      }

      75% {
        transform: scale(2, 0.05);
      }

      79% {
        transform: scale(2, 0.05);
      }

      83% {
        transform: scale(0.7, 1.2);
      }

      87% {
        transform: scale(1, 1);
      }

      100% {
        transform: scale(1, 1);
      }
    }

    @keyframes starWalk {
      0% {
        transform: scale(1, 1) rotate(0);
        transform-origin: 22% bottom;
      }

      10% {
        transform: scale(1, 1) rotate(0);
        transform-origin: 22% bottom;
      }

      25% {
        transform: scale(0.97, 1.02) rotate(-6deg);
        transform-origin: 22% bottom;
      }

      35% {
        transform: scale(1.02, 0.97) rotate(0);
        transform-origin: 22% bottom;
      }

      40% {
        transform: scale(0.99, 1.01) rotate(0);
        transform-origin: 22% bottom;
      }

      45% {
        transform: scale(1, 1) rotate(0);
        transform-origin: 22% bottom;
      }

      50% {
        transform: scale(1, 1) rotate(0);
        transform-origin: 78% bottom;
      }

      65% {
        transform: scale(0.97, 1.02) rotate(6deg);
        transform-origin: 78% bottom;
      }

      75% {
        transform: scale(1.02, 0.97) rotate(0);
        transform-origin: 78% bottom;
      }

      80% {
        transform: scale(0.99, 1.01) rotate(0);
        transform-origin: 78% bottom;
      }

      85% {
        transform: scale(1, 1) rotate(0);
        transform-origin: 78% bottom;
      }

      100% {
        transform: scale(1, 1) rotate(0);
        transform-origin: 78% bottom;
      }
    }
  </style>
  <g id="Star_Frame" class="fadejs" clip-path="url(#clip0_36_28)">
    <g id="Star" filter="url(#filter0_i_36_28)">
      <path d="M57.6669 10.0235C59.2492 7.63884 62.7508 7.63884 64.3331 10.0236L80.9836 35.1188C81.5151 35.9199 82.3173 36.5028 83.2434 36.7607L112.256 44.8414C115.013 45.6093 116.095 48.9396 114.316 51.1813L95.5939 74.7717C94.9963 75.5248 94.6899 76.4678 94.7308 77.4283L96.0109 107.518C96.1325 110.377 93.2996 112.435 90.6178 111.436L62.3966 100.92C61.4958 100.585 60.5042 100.585 59.6034 100.92L31.3822 111.436C28.7004 112.435 25.8675 110.377 25.9891 107.518L27.2692 77.4283C27.3101 76.4678 27.0037 75.5248 26.4061 74.7717L7.68431 51.1813C5.90525 48.9396 6.98733 45.6093 9.74427 44.8414L38.7566 36.7607C39.6827 36.5028 40.4849 35.9199 41.0164 35.1188L57.6669 10.0235Z" fill="url(#paint0_linear_36_28)" />
    </g>
    <g id="Glow" opacity="0.8" filter="url(#filter1_f_36_28)">
      <path d="M57.6669 27.0236C59.2492 24.6388 62.7508 24.6388 64.3331 27.0236L75.0881 43.2333C75.6196 44.0344 76.4218 44.6172 77.3479 44.8751L96.0878 50.0947C98.8447 50.8626 99.9268 54.1929 98.1477 56.4346L86.0548 71.6723C85.4572 72.4253 85.1508 73.3684 85.1917 74.3289L86.0185 93.7645C86.1402 96.6237 83.3072 98.682 80.6255 97.6827L62.3967 90.8904C61.4958 90.5547 60.5042 90.5547 59.6033 90.8904L41.3745 97.6827C38.6928 98.682 35.8598 96.6237 35.9815 93.7645L36.8083 74.3289C36.8492 73.3684 36.5428 72.4253 35.9452 71.6723L23.8523 56.4346C22.0732 54.1929 23.1553 50.8626 25.9122 50.0947L44.6521 44.8751C45.5782 44.6172 46.3804 44.0344 46.9119 43.2333L57.6669 27.0236Z" fill="white" />
    </g>
    <g id="Eyes">
      <g id="Eye_Left" filter="url(#filter2_d_36_28)">
        <rect id="Base_eye" x="53" y="49" width="4" height="16" rx="2" fill="#333333" />
        <rect id="Glow_ey.........完整代码请登录后点击上方下载按钮下载查看