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

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

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