svg实现敲代码的蛋蛋动画效果代码-html代码-BFW代码库

svg实现敲代码的蛋蛋动画效果代码

代码语言：html

所属分类：动画

代码描述：svg实现敲代码的蛋蛋动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #26324a;
  background: #36393f;
}
.eggo {
  height: 50vmin;
}
.eggo__lines {
  -webkit-animation: code 1s infinite linear;
          animation: code 1s infinite linear;
}
@-webkit-keyframes code {
  to {
    transform: translate(0, -125px);
  }
}
@keyframes code {
  to {
    transform: translate(0, -125px);
  }
}
</style>


</head>

<body>
  <svg class="eggo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 412.8">
  <defs>
    <g id="a">
      <path opacity=".75" fill="#22da6e" stroke-width="7.1" d="M307.9 57.7h73.5V73h-73.5z"/>
      <path opacity=".75" fill="#c792ea" stroke-width="9.9" d="M240.1 78.5h141.3v15.3H240.1z"/>
      <path opacity=".75" fill="#21c7a8" stroke-width="8" d="M287.7 99.3h93.6v15.3h-93.6z"/>
      <path opacity=".75" fill="#f78c6c" stroke-width="6.9" d="M312.2 120h69.1v15.3h-69.1z"/>
      <path opacity=".75" fill="#82aaff" stroke-width="8.2" d="M282.9 140.8h98.4v15.3h-98.4z"/>
      <path opacity=".75" fill="#ef5350" stroke-width="8.9" d="M266.3 161.5h115v15.3h-115z"/>
      <path opacity=".75" fill="#addb67" stroke-width="4.9" d="M265.9 57.7h35V73h-35z"/>
    </g>
    <g id="c">
      <use href="#a"/>
      <use href="#a" y="125"/>
    </g>
    <clipPath id="b">
      <path d="M253 150a15.5 15.5 0 00-15.7 13c-1.7 8.9-2.8 17.9-3.3 27-.1 10.3 3.6 17.3 11 21 27.6 12.2 59.7 18.3 98 18.5 3 0 5.6-2 6.4-4.8 3.6-14.3 8.6-35.5 9.1-55 0-1.8-1-3.5-2.7-4.3-26.3-11.7-82.4-15.7-102.9-15.4zM42 165.4a4.6 4.6 0 00-2.7 4.4c.5 19.4 5.5 40.6 9.1 55a6.5 6.5 0 006.3 4.8c38.4-.2 70.5-6.3 98.1-18.6 7.4-3.6 11.1-10.7 11-21-.5-9.1-1.6-18.1-3.3-27-.3-2.1-3-12.8-15.6-13-12-.2-73.3 2.2-102.9 15.4z"/>
    </clipPath>
  </defs>
  <path d="M198.9 31.1c71.1 0 128.8 152.8 128.8 223.9a128.7 128.7 0 11-257.4 0c0-71.1 57.6-223.9 128.7-223.9z" fill="#FCFBFA"/>
  <path d="M86.3 135.1a307 307 0 0143.........完整代码请登录后点击上方下载按钮下载查看