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

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

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