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.2386-.0067 2.5172.6003.6358.305 1.3116.7874 1.8203 1.5228.5106.733.822 1.7.819 2.847v2.06c-.006.093.007 1.194-.6228 2.428-.3164.612-.817 1.264-1.58 1.754-.76.492-1.7632.793-2.9537.79h-21.687c-.0962-.005-1.2386.008-2.5172-.599-.6358-.306-1.3116-.787-1.8203-1.522-.5106-.733-.822-1.699-.819-2.848v-2.06h2.303v2.06c.003.783.192 1.264.4324 1.617.1823.264.4095.463.668.624.3844.24.844.379 1.2014.446.1792.034.3304.05.4305.058l.108.007h.0192l-.006.343v-.343h.006l-.006.343v-.343h21.687c.811-.003 1.3107-.185 1.676-.417.2745-.175.4807-.394.648-.643.2493-.37.3934-.813.4615-1.158.035-.172.052-.318.061-.414l.006-.105.001-.018.3555.006h-.3554v-.006l.356.006h-.355v-2.06c-.004-.782-.192-1.263-.432-1.616-.183-.264-.409-.463-.668-.623-.384-.24-.844-.379-1.202-.446-.178-.034-.329-.05-.429-.058l-.108-.007-.02-.001.007-.342v.343h-.007l.007-.342v.342h-21.687c-.812.004-1.31.185-1.677.417-.273.177-.479.395-.647.644-.249.371-.393.815-.462 1.159-.034.172-.052.318-.06.414l-.007.105v.019l-.354-.007h.355v.007l-.354-.007h.354-1.151"/>
                    <path id="Fill-2072" fill="#3FA033" d="M156 61h4V15h-4z"/>
                    <path id="Fill-2073" fill="#3FA033" d="M158 14.903V16c2.2058 0 3.999-1.7874 4-4.0005C161.999 9.7865 160.2058 8 158 8c-2.2068 0-3.999 1.7864-4 3.9995.001 2.213 1.7932 4.0005 4 4.0005v-2.1942c-1.0037-.002-1.81-.8126-1.812-1.8063.002-.9937.8083-1.8043 1.812-1.8053 1.0037.001 1.81.8116 1.812 1.8053-.002.9937-.8083 1.8043-1.812 1.8063v1.097"/>
                    <path id="Fill-2074" fill="#3FA033" d="M158 65.903V67c2.2058-.001 3.999-1.7872 4-4-.001-2.2128-1.7942-3.999-4-4-2.2068.001-3.999 1.7872-4 4 .001 2.2128 1.7932 3.999 4 4v-2.194c-1.0037-.002-1.81-.8125-1.812-1.806.002-.9935.8083-1.804 1.812-1.806 1.0037.002 1.81.8125 1.812 1.806-.002.9935-.8083 1.804-1.812 1.806v1.097"/>
                </g>
                <g id="letter-m">
                    <path id="Fill-2086" fill="#E0001B" d="M191.936 68.8916V70c-.089-.006-1.1868.007-2.4114-.62-.6084-.3156-1.2546-.812-1.74-1.5696-.4886-.7547-.7875-1.7515-.7846-2.9383V11.128c.0058-.0926-.0067-1.234.5968-2.5063.3028-.632.7816-1.3033 1.511-1.8077.7263-.5065 1.686-.818 2.8282-.814h2.128c.089.006 1.1868-.007 2.4114.619.6084.3156 1.2546.813 1.74 1.5696.4886.7557.7875 1.7515.7846 2.9393v53.744c-.0058.092.0067 1.233-.5968 2.505-.3037.632-.7816 1.303-1.511 1.807-.7273.507-1.686.818-2.8282.815h-2.128v-2.217h2.128c.7912-.004 1.2836-.195 1.6444-.442.535-.367.8366-.956.9982-1.517.0803-.276.121-.531.1402-.71l.0174-.201.001-.045.062.002h-.061l-.001-.002.062.002h-.061V11.128c-.004-.823-.1886-1.3336-.4256-1.7094-.353-.5547-.92-.8692-1.4596-1.037-.265-.0824-.5107-.1256-.683-.1457l-.1943-.019-.0416-.001.002-.065v.064h-.002l.002-.065v.064h-2.128c-.791.003-1.283.195-1.644.441-.535.367-.836.956-.998 1.516-.08.275-.121.531-.141.709l-.016.202-.002.043-.062-.001h.062v.001l-.062-.001h.062V64.87c.003.822.188 1.3337.426 1.7085.353.556.92.8697 1.46 1.037.265.084.511.126.683.147l.194.017.043.002-.002.0636v-.063h.002l-.002.063v-.063 1.108"/>
                    <path id="Fill-2087" fill="#009FEE" d="M237.936 68.8916V70c-.089-.006-1.1868.007-2.4114-.62-.6084-.3156-1.2546-.812-1.74-1.5696-.4886-.7547-.7875-1.7515-.7846-2.9383V11.128c.0058-.0926-.0068-1.234.5968-2.5063.3028-.632.7816-1.3033 1.511-1.8077.7263-.5065 1.686-.818 2.8282-.814h2.128c.089.006 1.1868-.007 2.4114.619.6084.3156 1.2546.813 1.74 1.5696.4886.7557.7875 1.7515.7846 2.9393v53.744c-.0058.092.0068 1.233-.5968 2.505-.3037.632-.7816 1.303-1.511 1.807-.7273.507-1.686.818-2.8282.815h-2.128v-2.217h2.128c.7912-.004 1.2836-.195 1.6444-.442.535-.367.8366-.956.9982-1.517.0803-.276.121-.531.1402-.71l.0174-.201.001-.045.062.002h-.061l-.001-.002.062.002h-.061V11.128c-.004-.823-.1886-1.3336-.4256-1.7094-.353-.5547-.92-.8692-1.4596-1.037-.265-.0824-.5107-.1256-.683-.1457l-.1943-.019-.0416-.001.002-.065v.064h-.002l.002-.065v.064h-2.128c-.791.003-1.283.195-1.644.441-.535.367-.836.956-.998 1.516-.08.275-.121.531-.141.709l-.016.202-.002.043-.061-.001h.061v.001l-.061-.001h.061V64.87c.003.822.188 1.3337.426 1.7085.353.556.92.8697 1.46 1.037.265.084.511.126.683.147l.194.017.043.002-.002.0636v-.063h.002l-.002.063v-.063 1.108"/>
                    <path id="Fill-2088" fill="#3FA033" d="M216 40.1396L196.88 21 194 23.8594 213.12 43"/>
                    <path id="Fill-2089" fill="#3FA033" d="M193 23.9283V25c2.2103-.001 4-1.7906 4-4 0-2.2103-1.7897-4-4-4-2.2094 0-3.999 1.7897-4 4 .001 2.2094 1.7906 3.999 4 4v-2.1433c-1.025-.002-1.8547-.8317-1.8567-1.8567.002-1.025.8317-1.8547 1.8567-1.8567 1.025.002 1.8547.8317 1.8567 1.8567-.002 1.025-.8317 1.8547-1.8567 1.8567v1.0716"/>
                    <path id="Fill-2090" fill="#3FA033" d="M217 40.1396L236.12 21l2.88 2.8594L219.88 43"/>
                    <path id="Fill-2091" fill="#3FA033" d="M239 23.9283V25c-2.2094-.001-3.999-1.7906-4-4 .001-2.2103 1.7906-4 4-4 2.2103 0 4 1.7897 4 4 0 2.2094-1.7897 3.999-4 4v-2.1433c1.025-.002 1.8547-.8317 1.8567-1.8567-.002-1.025-.8317-1.8547-1.8567-1.8567-1.025.002-1.8547.8317-1.8567 1.8567.002 1.025.8317 1.8547 1.8567 1.8567v1.0716"/>
                    &l.........完整代码请登录后点击上方下载按钮下载查看