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: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(5) {
      stroke: #00ff80;
      stroke-width: 2.75px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -33.88px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 0.625s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(6) {
      stroke: #33ff00;
      stroke-width: 2.5px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -31.98px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 0.75s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(7) {
      stroke: #e6ff00;
      stroke-width: 2.25px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -30.08px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 0.875s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(8) {
      stroke: #ff6600;
      stroke-width: 2px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -28.18px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 1s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(9) {
      stroke: #ff004d;
      stroke-width: 1.75px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -26.28px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 1.125s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    body svg g.arc path:nth-of-type(10) {
      stroke: fuchsia;
      stroke-width: 1.5px;
      stroke-dasharray: 400px;
      stroke-dashoffset: -400px;
      transform: translate(-8.49px, -24.38px);
      animation: drawin2 4s ease-out 1 forwards;
      animation-delay: 1.25s;
    }
    @keyframes drawin2 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    @keyframes drawin4 {
      to {
        stroke-dashoffset: 0px;
      }
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <input type="radio" name="restart">
    <input type="radio" name="restart">
    <h1>play it again!</h1>
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="-20 0 228.27 129.28"><defs><style>.cls-1{stroke-linecap:round;stroke-linejoin:round;}</style></defs>
  <g class="arc">
    <path class="cls-1" d="M185,127.22a2.89,2.89,0,0,0,.27-1.45c0.22-1.71.28-3.43,0.42-5.15a48.48,48.48,0,0,0-.1-7.05c-0.1-1.55-.35-3.09-0.55-4.63a59.55,59.55,0,0,0-1.79-8.33,58,58,0,0,0-2.64-7.36,70.8,70.8,0,0,0-6.36-11.54,75.51,75.51,0,0,0-12.08-13.79,84.64,84.64,0,0,0-11-8.35,96.84,96.84,0,0,0-32.08-13c-2-.4-4-0.76-6.07-1.07a108.62,108.62,0,0,0-10.92-1.06c-2.78-.14-5.56-0.11-8.34,0-2.07,0-4.15.19-6.22,0.38s-4.06.41-6.06,0.76c-3.88.69-7.73,1.48-11.54,2.52a98.65,98.65,0,0,0-12.87,4.47,89.46,89.46,0,0,0-15.25,8.39A81.76,81.76,0,0,0,24.45,76.8.........完整代码请登录后点击上方下载按钮下载查看