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-1.853-1.853.001-1.023.8292-1.851 1.853-1.853 1.023.002 1.851.83 1.853 1.853-.002 1.023-.83 1.851-1.853 1.853v1.0735"/>
                    <path id="Fill-2059" fill="#3FA033" d="M15 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.023-.002-1.851-.83-1.853-1.853.002-1.023.83-1.851 1.853-1.853 1.023.002 1.851.83 1.853 1.853-.002 1.023-.83 1.851-1.853 1.853v1.0735"/>
                </g>
                <g id="letter-n">
                    <path id="Fill-2060" fill="#E0001B" d="M83.253 68.8942V70c-.0948-.006-1.263.007-2.5663-.6186-.6485-.3147-1.336-.81-1.853-1.5658-.5187-.753-.8368-1.7474-.8337-2.9313V10.1157c.0062-.0922-.0072-1.231.634-2.4992.3233-.6316.833-1.3012 1.609-1.8045.773-.5052 1.7932-.815 3.01-.812h2.494c.0948.006 1.263-.007 2.5663.6176.6485.3147 1.336.811 1.853 1.5658.5187.754.8368 1.7474.8337 2.9323v54.7686c-.0062.0922.0072 1.23-.635 2.4992-.3223.6306-.832 1.3002-1.608 1.8035-.773.5062-1.7932.816-3.01.813h-2.494v-2.2115h2.494c.842-.004 1.366-.1955 1.751-.441.5683-.366.8894-.9535 1.0624-1.5128.0844-.2747.1286-.5293.1492-.7078l.0175-.201.003-.044.065.002h-.065v-.002l.065.002h-.065V10.115c-.003-.821-.199-1.3303-.453-1.7052-.374-.5533-.979-.866-1.552-1.0345-.282-.0824-.544-.1255-.726-.1456l-.207-.017-.045-.002.002-.064v.0642h-.002l.002-.065v.064h-2.494c-.842.003-1.366.194-1.751.441-.568.365-.889.953-1.062 1.512-.084.274-.128.53-.149.708l-.017.201-.002.043-.067-.001h.067v.001l-.067-.001h.067v54.769c.003.82.2 1.33.453 1.704.375.554.979.867 1.553 1.034.282.083.545.125.727.146l.207.017.044.002-.001.064v-.064h.001l-.001.064v-.064 1.105"/>
                    <path id="Fill-2061" fill="#009FEE" d="M121.2525 68.8942V70c-.0947-.006-1.263.007-2.566-.6186-.6475-.3147-1.335-.81-1.8517-1.5658-.5198-.753-.838-1.7474-.8348-2.9313V10.1157c.0062-.0922-.0072-1.231.635-2.4992.3233-.6316.8318-1.3012 1.6078-1.8045.774-.5052 1.794-.815 3.0097-.812h2.495c.0947.006 1.263-.007 2.566.6176.6475.3147 1.335.811 1.8517 1.5658.5198.754.838 1.7474.8348 2.9323v54.7686c-.0062.0922.0072 1.23-.635 2.4992-.3233.6306-.8318 1.3002-1.6078 1.8035-.774.5062-1.794.816-3.0097.813h-2.495v-2.2115h2.495c.842-.004 1.366-.1955 1.7498-.441.5682-.366.8903-.9535 1.0622-1.5128.0855-.2747.1287-.5293.1493-.7078l.0185-.201.001-.044.066.002h-.065l-.001-.002.066.002h-.065V10.115c-.004-.821-.2007-1.3303-.4528-1.7052-.3757-.5533-.979-.866-1.5532-1.0345-.282-.0824-.5435-.1255-.7267-.1456l-.207-.017-.0442-.002.002-.064v.0642h-.002l.002-.065v.064h-2.495c-.842.003-1.3658.194-1.7497.441-.5692.365-.8903.953-1.0622 1.512-.0855.274-.1287.53-.1493.708l-.0185.201-.002.043-.066-.001h.066v.001l-.066-.001h.066v54.769c.004.82.2007 1.33.4528 1.704.3757.554.979.867 1.5532 1.034.282.083.5435.125.7267.146l.207.017.0442.002-.002.063v-.063h.002l-.002.063v-.063 1.105"/>
                    <path id="Fill-2062" fill="#DE007B" d="M85 21.8023L119.1977 56 122 53.1967 87.8033 19"/>
                    <path id="Fill-2063" fill="#DE007B" d="M84.0005 20.927V22C86.21 21.999 87.999 20.209 88 17.9995 87.999 15.79 86.21 14 84.0005 14 81.79 14 80.001 15.79 80 17.9995c.001 2.2094 1.79 3.9995 4.0005 4.0005v-2.1462c-1.0235-.002-1.8524-.8308-1.8543-1.8543.002-1.0235.8308-1.8514 1.8543-1.8533 1.0235.002 1.8514.8298 1.8533 1.8533-.002 1.0235-.8298 1.8524-1.8533 1.8543v1.073"/>
                    <path id="Fill-2064" fill="#DE007B" d="M122.9995 59.927V61c2.2104 0 3.9995-1.79 4.0005-3.9995-.001-2.2094-1.79-3.9995-4.0005-4.0005-2.2094.001-3.9985 1.791-3.9995 4.0005C119.001 59.21 120.79 61 122.9995 61v-2.1462c-1.0235-.001-1.8514-.8298-1.8533-1.8533.002-1.0235.8298-1.8524 1.8533-1.8543 1.0235.002 1.8524.8308 1.8543 1.8543-.002 1.0235-.8308 1.8524-1.8543 1.8533v1.073"/>
                </g>
                <g id="letter-i">
                    <path id="Fill-2070" fill="#DE007B" d="M144.1155 10.924H143c.006-.0887-.007-1.184.624-2.4055.3165-.607.8172-1.2515 1.5797-1.736.7595-.4872 1.7627-.7854 2.957-.7825h20.6785c.093.0058 1.242-.0067 2.5222.5954.6362.302 1.3117.7797 1.8194 1.5072.5107.7247.8232 1.682.8192 2.8215v2.152c-.006.089.007 1.184-.623 2.406-.3176.608-.8172 1.253-1.5797 1.737-.7605.486-1.7627.785-2.958.782h-20.6785c-.093-.005-1.241.007-2.5212-.594-.6362-.303-1.3117-.78-1.8204-1.508-.5097-.724-.8222-1.681-.8192-2.821v-2.152h2.231v2.152c.003.789.1962 1.281.445 1.642.368.533.9617.834 1.526.996.2772.08.534.121.713.14l.2033.017.0445.002-.002.061v-.061h.002l-.002.061v-.061h20.6784c.8283-.003 1.342-.187 1.7203-.424.5582-.351.8747-.917 1.0436-1.455.083-.264.127-.51.147-.681l.018-.194.001-.041.065.001h-.064v-.001l.065.001h-.064v-2.152c-.003-.789-.196-1.281-.444-1.64-.369-.533-.961-.835-1.526-.996-.277-.08-.535-.12-.714-.141l-.203-.016-.043-.002.001-.06v.06h-.001l.001-.06v.06h-20.679c-.827.003-1.342.187-1.719.424-.559.351-.875.918-1.043 1.456-.084.265-.126.51-.147.682l-.017.193-.002.043-.063-.002h.064v.002l-.063-.002h.063-1.115"/>
                    <path id="Fill-2071" fill="#009FEE" d="M143.1515 61.9698H142c.006-.0926-.007-1.1937.6218-2.426.3174-.6128.818-1.2642 1.58-1.7544.761-.4912 1.7632-.7923 2.9547-.7894h21.687c.0962.0068 1.........完整代码请登录后点击上方下载按钮下载查看