svg+css实现文字拼凑动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现文字拼凑动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    .container {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 1rem;
}

svg {
  max-width: 50rem;
  width: 100%;
  height: auto;
  padding: 3rem 0;
}

#letter-i {
  transform-origin: 50% 100%;
  -webkit-animation: bounce 2s infinite ease-in-out;
          animation: bounce 2s infinite ease-in-out;
}

#letter-ii {
  transform-origin: 50% 100%;
  -webkit-animation: bounce 2s 0.5s infinite ease-in-out;
          animation: bounce 2s 0.5s infinite ease-in-out;
}

#letter-o {
  transform-origin: 445.5px 50%;
  -webkit-animation: spin 4s infinite ease-in-out alternate;
          animation: spin 4s infinite ease-in-out alternate;
}

#letter-a {
  -webkit-animation: flash 1.5s infinite;
          animation: flash 1.5s infinite;
}

#letter-aa {
  -webkit-animation: flash 1s 1s infinite;
          animation: flash 1s 1s infinite;
}

@-webkit-keyframes bounce {
  10% {
    transform: scaleY(0.8);
  }
  25%, 26% {
    transform: translateY(-24px) scaleY(1.001);
  }
  35% {
    transform: translateY(0) scaleY(0.999);
  }
  50% {
    transform: scaleY(0.9);
  }
  70% {
    transform: scaleY(1);
  }
}

@keyframes bounce {
  10% {
    transform: scaleY(0.8);
  }
  25%, 26% {
    transform: translateY(-24px) scaleY(1.001);
  }
  35% {
    transform: translateY(0) scaleY(0.999);
  }
  50% {
    transform: scaleY(0.9);
  }
  70% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes spin {
  25% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(270deg);
  }
  90% {
    transform: rotate(1080deg);
  }
  100% {
    transform: rotate(1050deg);
  }
}
@keyframes spin {
  25% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(270deg);
  }
  90% {
    transform: rotate(1080deg);
  }
  100% {
    transform: rotate(1050deg);
  }
}
@-webkit-keyframes flash {
  25% {
    opacity: 1;
  }
  27% {
    opacity: 0.4;
  }
  29% {
    opacity: 1;
  }
  31% {
    opacity: 0.4;
  }
  75% {
    opacity: 1;
  }
}
@keyframes flash {
  25% {
    opacity: 1;
  }
  27% {
    opacity: 0.4;
  }
  29% {
    opacity: 1;
  }
  31% {
    opacity: 0.4;
  }
  75% {
    opacity: 1;
  }
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 75" style="overflow:visible;">
                <g id="letter-a">
                    <path id="Fill-2055" fill="#009FEE" d="M33.3487 6.4045l.413-1.0256c-.088-.03-1.1362-.468-2.5435-.363-.7012.055-1.5064.264-2.2545.776-.7492.509-1.4074 1.314-1.8465 2.414L5.3782 62.135c-.0292.0882-.4663 1.138-.3622 2.5494.055.7028.263 1.5088.7742 2.2587.508.752 1.3113 1.411 2.4085 1.852l2.0395.826c.088.03 1.1363.468 2.5436.363.7012-.055 1.5064-.263 2.2535-.776.7502-.509 1.4074-1.314 1.8475-2.414l21.739-53.929c.0292-.087.4663-1.138.3622-2.548-.055-.703-.263-1.51-.7742-2.259-.508-.751-1.3113-1.41-2.4085-1.851l-2.0395-.826-.8272 2.051 2.0405.827c.758.31 1.158.679 1.413 1.047.375.546.445 1.209.391 1.79-.026.286-.082.539-.129.711l-.06.193-.014.041.06.023-.06-.024v.001l.06.023-.06-.024-21.738 53.929c-.31.759-.677 1.161-1.045 1.416-.545.376-1.206.446-1.785.393-.285-.027-.537-.083-.709-.13l-.193-.059-.041-.015-.022.058.023-.057-.001-.001-.022.058.023-.057-2.039-.826c-.758-.311-1.159-.679-1.413-1.048-.375-.546-.445-1.209-.391-1.789.026-.285.082-.538.129-.71l.059-.193.015-.041-.06-.023.059.024.001-.001-.06-.023.059.024 21.739-53.93c.31-.76.677-1.161 1.045-1.416.545-.376 1.207-.446 1.786-.392.285.026.537.082.709.13l.194.059.041.014.022-.06-.024.06h.002l.022-.06-.024.06.414-1.025"/>
                    <path id="Fill-2056" fill="#DE007B" d="M35.652 6.4045l-.4132-1.0256c.087-.03 1.1353-.468 2.5426-.363.702.055 1.5063.264 2.2545.776.749.509 1.407 1.314 1.847 2.414l21.739 53.929c.028.088.466 1.138.362 2.549-.055.703-.264 1.51-.774 2.258-.509.752-1.312 1.41-2.409 1.851l-2.04.826c-.088.029-1.137.467-2.544.363-.701-.055-1.507-.264-2.255-.776-.75-.509-1.408-1.314-1.847-2.414L30.378 12.864c-.029-.087-.466-1.138-.363-2.5484.056-.7028.264-1.5098.775-2.2597.5083-.751 1.3114-1.411 2.4087-1.852l2.0394-.826.827 2.051-2.039.826c-.758.31-1.158.678-1.412 1.046-.376.546-.445 1.209-.392 1.79.027.286.082.538.13.711l.059.192.015.041-.06.023.059-.024.001.001-.06.023.059-.024 21.738 53.93c.309.759.677 1.161 1.045 1.415.545.377 1.206.446 1.785.393.285-.027.537-.082.709-.13l.193-.059.041-.015.022.06-.024-.059.002-.001.022.06-.024-.059 2.04-.826c.758-.311 1.158-.679 1.413-1.048.376-.547.446-1.209.392-1.79-.026-.286-.082-.538-.13-.711l-.059-.193-.014-.041.06-.023-.06.024v-.001l.06-.023-.06.024-21.74-53.926c-.309-.76-.677-1.161-1.044-1.416-.545-.377-1.206-.448-1.786-.393-.285.026-.537.082-.709.13l-.192.059-.041.014-.023-.06.024.06h-.001l-.023-.06.024.06-.413-1.026"/>
                    <path id="Fill-2057" fill="#3FA033" d="M19 57h32v-4H19z"/>
                    <path id="Fill-2058" fill="#3FA033" d="M53 57.9265V59c2.2092-.001 3.999-1.7908 4-4-.001-2.2092-1.7908-3.999-4-4-2.2102.001-4 1.7908-4 4s1.7898 3.999 4 4v-2.147c-1.0238-.002-1.852-.83-.........完整代码请登录后点击上方下载按钮下载查看