split实现文字路径环绕动画-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：split实现文字路径环绕动画，结合d3实现

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/splitting.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
  box-sizing: border-box;
}
body {
  background: #0d0d0d;
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  font-family: 'Lato', sans-serif;
}
.container {
  height: 60vmin;
  position: relative;
  width: 60vmin;
}
.char {
  --delay: calc(((var(--char-total) - var(--char-index))) - var(--word-index));
  offset-path: path(var(--path));
  -webkit-animation: travel 6s calc((var(--delay) * (0.15)) * -1s) infinite linear both;
          animation: travel 6s calc((var(--delay) * (0.15)) * -1s) infinite linear both;
  offset-rotate: auto 180deg;
  position: absolute !important;
  font-size: 4vmin;
  font-weight: bold;
  top: 0%;
  left: 0%;
  -webkit-transform: translate(0, -0.5vmin);
          transform: translate(0, -0.5vmin);
  color: #f2f2f2;
}
svg {
  height: 100%;
  width: 100%;
}
path {
  stroke: hsla(var(--hue, 0), 100%, 50%, 0.25);
  stroke-width: 0.25px;
}
.gradient {
  height: 0;
  width: 0;
}
@-webkit-keyframes travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
@keyframes travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
</style>

</head>
<body translate="no">
<div class="container" style="--hue: 148.69604666446017;">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64.228 27.004">
<path d="M32.074 13.446s-2.706-2.965-4.158-4.349c-2.003-1.908-3.941-3.942-6.268-5.437C19.33 2.173 16.838.747 14.132.24 13.01.028 11.818.152 10.71.43 8.61.96 6.534 1.85 4.826 3.18a11.59 11.59 0 00-3.262 3.998C.624 9.104.186 11.304.136 13.446c-.04 1.678.287 3.389.884 4.957.602 1.579 1.477 3.106 2.655 4.318 1.545 1.59 3.456 2.957 5.564 3.645 1.786.583 3.783.636 5.629.288 1.861-.35 3.56-1.354 5.18-2.334 1.82-1.1 3.429-2.525 5.021-3.934 3.71-3.281 6.94-7.07 10.522-10.49 1.692-1.614 3.369-3.253 5.18-4.732 1.614-1.318 3.155-2.82 5.054-3.678C47.606.68 49.595.147 51.549.206c2.04.062 4.1.705 5.884 1.696 1.492.827 2.796 2.047 3.806 3.421 1.138 1.55 1.896 3.39 2.399 5.245.361 1.334.547 2.75.415 4.126-.155 1.628-.675 3.238-1.407 4.7-.754 1.507-1.775 2.913-3.006 4.062-1.202 1.122-2.603 2.12-4.157 2.655-1.701.585-3.583.692-5.373.511-1.819-.183-3.611-.78-5.245-1.599-1.833-.92-3.405-2.304-4.957-3.645-2.811-2.43-7.834-7.932-7.834-7.932" fill="none"></path>
</svg>
<div class="text" data-splitting="">bfw.wiki</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/splitting.min.js"></script>
<script >
const { d3, Splitting } = window
/**
 * Meanderer class. Accepts a path, container, height, width, and change handler.
 * Although it doesn't need a handler. We can just call get path and let it do that.
 * The checks can be handled outside. We don't need to do it inside.
 */
class Meanderer {
  container
  height
  path
  threshold
  width
  constructor({ height, path, threshold = 0.2, width }) {
    this.height = height
    this.path = path
    this.threshold = threshold
    this.width = width
    // With what we are given create internal references
    this.aspect_ratio = width / height
    // Convert the path into a data set
    this.path_data = this.convertPathToData(path)
    this.maximums = this.getMaximums(this.path_data)
    this.range_ratios = this.getRatios(this.maximums, width, height)
  }
  // This is relevant for when we want to interpolate points to
  // the container scale. We need the minimum and maximum for both X and Y
  getMaximums = data => {
    const X_POINTS = data.map(point => point[0])
    const Y_POINTS = data.map(point => point[1])
    return [
      Math.max(...X_POINTS), // x2
      Math.max(...Y_POINTS), // y2
    ]
  }
  // Generate some ratios based on the data points and the path width and h.........完整代码请登录后点击上方下载按钮下载查看