svg文字跳动效果-html代码-BFW代码库

svg文字跳动效果

代码语言：html

所属分类：动画

代码描述：svg文字跳动效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
  height: 100%;
}

body {
  background-color: black;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

.header {
  width: 90%;
  max-width: 400px;
}

g path {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
}

g:nth-child(1) path {
  -webkit-animation-name: wiggleWiggle;
          animation-name: wiggleWiggle;
  -webkit-animation-duration: 1.25s;
          animation-duration: 1.25s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: steps(2, end);
          animation-timing-function: steps(2, end);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#E {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

#N {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

#T {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}

#H {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#U {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

#S_2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

#I {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}

#A {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

#S {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}

#M {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

/* transform: translateY(3px); */
@-webkit-keyframes wiggleWiggle {
  20%,
  100% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
  0% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
  10% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
}
@keyframes wiggleWiggle {
  20%,
  100% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
  0% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
  10% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
}
</style>

</head>
<body translate="no">
<svg class="header" title="Department of Enthusiasm" viewBox="0 0 146 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="enthusiasm">
<path id="E" d="M68.274 3.2285V1.8125H62.25V10.2845H68.574V8.8565H63.81V6.5885H67.89V5.2205H63.81V3.2285H68.274Z" fill="white" />
<path id="N" d="M76.189 7.8005L72.445 1.8125H71.017V10.2845H72.565L72.469 4.3445L76.177 10.2845H77.557V1.8125H75.997L76.189 7.8005Z" fill="white" />
<path id="T" d="M85.7629 1.8125H79.5469V3.2525H81.8389V10.2845H83.4229V3.2525H85.7629V1.8125Z" fill="white" />
<path id="H" d="M92.9792 1.8125V5.0165H89.3432V1.8125H87.7592V10.2845H89.3432V6.4325H92.9792V10.2845H94.5752V1.8125H92.9792Z" fill="white" />
<path id="U" d="M102.241 1.8125V6.9365C102.241 7.6445 102.241 8.1245 101.773 8.5445C101.305 8.9525 100.669 8.9645 100.417 8.9645C99.9133 8.9645 99.0253 8.8685 98.7013 8.0525C98.5813 7.7285 98.5933 7.3805 98.5933 7.0205V1.8125H97.0093V6.8645C97.0213 7.9205 97.0213 8.1845 97.1293 8.5565C97.3213 9.1925 97.8613 9.9245 98.8693 10.2725C99.3493 10.4405 99.8533 10.5005 100.369 10.5005C100.945 10.5005 102.061 10.4285 102.925 9.6725C103.825 8.9045 103.825 8.1125 103.837 7.1525V1.8125H102.241Z" fill="white" />
<path id="S_2" d="M105.827 8.652C106.463 9.684 107.459 10.092 108.023 10.26C108.539 10.404 109.067 10.452 109.535 10.452C111.335 10.452 113.135 9.672 113.135 7.728C113.135 5.91.........完整代码请登录后点击上方下载按钮下载查看