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

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

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