svg+css实现彩虹文字描边绘制动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现彩虹文字描边绘制动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
      display: flex;
      width: 100%;
      height: 100vh;
      justify-content: center;
      align-items: center;
      background: radial-gradient(circle at center, #222, #000);
    }
    body h1 {
      position: absolute;
      display: inline-block;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      bottom: 0;
      color: #fff;
      font-size: 20px;
      z-index: 0;
      padding: 20px;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple, red, orange, yellow, green, blue, purple);
      transition: 0.2s ease-in-out;
      background-size: 200%;
      background-position: 0% 50%;
    }
    body input {
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform: translateX(-50%);
      z-index: 9;
      height: 100px;
      opacity: 0;
      width: 100%;
    }
    body input:hover + h1 {
      transform: translateX(-50%) scale(1.05);
      background-position: 100% 50%;
    }
    body input:checked {
      opacity: 0;
      pointer-events: none;
    }
    body input:checked + h1 ~ svg g.arc path {
      animation: drawin4 4s ease-out 1 forwards;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(1) {
      animation-delay: 0.125s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(2) {
      animation-delay: 0.25s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(3) {
      animation-delay: 0.375s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(4) {
      animation-delay: 0.5s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(5) {
      animation-delay: 0.625s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(6) {
      animation-delay: 0.75s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(7) {
      animation-delay: 0.875s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(8) {
      animation-delay: 1s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(9) {
      animation-delay: 1.125s;
    }
    body input:checked + h1 ~ svg g.arc path:nth-of-type(10) {
      animation-delay: 1.25s;
    }
    body input:checked + h1 ~ svg g.ride path {
      animation: drawin3 1s ease-in 1 forwards;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(1) {
      animation-delay: 0.3333333333s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(2) {
      animation-delay: 0.6666666667s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(3) {
      animation-delay: 1s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(4) {
      animation-delay: 1.3333333333s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(5) {
      animation-delay: 1.6666666667s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(6) {
      animation-delay: 2s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(7) {
      animation-delay: 2.3333333333s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(8) {
      animation-delay: 2.6666666667s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(9) {
      animation-delay: 3s;
    }
    body input:checked + h1 ~ svg g.ride path:nth-of-type(10) {
      animation-delay: 3.3333333333s;
    }
    body svg {
      width: 75%;
      height: auto;
    }
    body svg path {
      stroke: red;
      fill: none;
      stroke-width: 2px;
    }
    body svg path.hide {
      display: none;
    }
    body svg path:nth-of-type(1) {
      stroke: #fff;
    }
    body svg path:nth-of-type(2) {
      stroke: #fff;
    }
    body svg path:nth-of-type(3) {
      stroke: #fff;
    }
    body svg path:nth-of-type(4) {
      stroke: #fff;
    }
    body svg path:nth-of-type(5) {
      stroke: #fff;
    }
    body svg path:nth-of-type(6) {
      stroke: #fff;
    }
    body svg path:nth-of-type(7) {
      stroke: #fff;
    }
    body svg path:nth-of-type(8) {
      stroke: #fff;
    }
    body svg path:nth-of-type(9) {
      stroke: #fff;
    }
    body svg path:nth-of-type(10) {
      stroke: #fff;
    }
    body svg path:nth-of-type(11) {
      stroke: #fff;
    }
    body svg path:nth-of-type(12) {
      stroke: #fff;
    }
    body svg path:nth-of-type(13) {
      stroke: #fff;
    }
    body svg path:nth-of-type(14) {
      stroke: #fff;
    }
    body svg path:nth-of-type(15) {
      stroke: #fff;
    }
    body svg path:nth-of-type(16) {
      stroke: #fff;
    }
    body svg path:nth-of-type(17) {
      stroke: #fff;
    }
    body svg path:nth-of-type(18) {
      stroke: #fff;
    }
    body svg path:nth-of-type(19) {
      stroke: #fff;
    }
    body svg path:nth-of-type(20) {
      stroke: #fff;
    }
    body svg g.ride path {
      stroke-dasharray: 140px;
      stroke-dashoffset: 140px;
      animation: drawin1 1s ease-in 1 forwards;
    }
    body svg g.ride path:nth-of-type(1) {
      animation-delay: 0.3333333333s;
    }
    body svg g.ride path:nth-of-type(2) {
      animation-delay: 0.6666666667s;
    }
    body svg g.ride path:nth-of-type(3) {
      animation-delay: 1s;
    }
    body svg g.ride path:nth-of-type(4) {
      animation-delay: 1.3333333333s;
    }
    body svg g.ride path:nth-of-type(5) {
      animation-delay: 1.6666666667s;
    }
    body svg g.ride path:nth-of-type(6) {
      animation-delay: 2s;
    }
    body svg g.ride path:nth-of-type(7) {
      animation-delay: 2.3333333333s;
    }
    body svg g.ride path:nth-of-type(8) {
      animation-delay: 2.6666666667s;
    }
    body svg g.ride path:nth-of-type(9) {
      animation-delay: 3s;
    }
    body svg g.ride path:nth-of-type(10) {
      animation-delay: 3.3333333333s;
    }
    @keyframes drawin1 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin3 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(1) {
      stroke: #ff00b3;
      stroke-width: 3.75px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -41.48px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 0.125s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(2) {
      stroke: #9900ff;
      stroke-width: 3.5px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -39.58px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 0.25s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(3) {
      stroke: #001aff;
      stroke-width: 3.25px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -37.68px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 0.375s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(4) {
      stroke: #00ccff;
      stroke-width: 3px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -35.78px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 0.5s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0.........完整代码请登录后点击上方下载按钮下载查看