如何使文本在弯曲的路径上来回移动 HTML CSS答案

【问题标题】：How To Make Text Move back and Forth On a Curved Path HTML CSS如何使文本在弯曲的路径上来回移动 HTML CSS
【发布时间】：2021-01-13 04:53:13
【问题描述】：

我正在尝试使文本“示例文本示例文本”在弯曲路径上来回移动。正如您在 sn-p 中看到的那样，我已经能够在一条直线上来回移动，但我不知道如何弯曲它并让它沿着弯曲的路径前进。另外，如果有人可以在文本到达路径的尽头时帮助我加快“轻松”速度，那就太好了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
    <title>Document</title>




    <style>
        *{
            margin: 0rem;
            padding: 0rem;
            box-sizing: border-box; 
        }
        html {
            font-size: 62.5%;
        }

        body {
            background: #1B2A41;
        }

        .container {
            margin: auto;
            width:  20rem;
            background-color: transparent;
        }

        .path {
            position: absolute;
            overflow: hidden;
            top: 15rem;
            left: 15rem;
            width: 165rem;
            height: 40rem;
            background-color: none;
            margin: auto;
            transform: rotate(20deg);
        }

        .shape {
            position: absolute;
            left: 0;
            background-color: none;
            height: 12rem;
            display: block;
            top: 40%;
            text-align: center;
            font-size: 5rem;
            font-family: 'Quicksand', sans-serif;
            color: #c4def5;
            text-shadow: 0 0 20px #4e91ac;
            
            
            x-transition: all 1s ;
            animation: ani 10s infinite;
        }

        .shape:after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            padding: 0 20px;
            z-index: -1;
            color: #8db9e0;
            filter: blur(15px);
        }


        @keyframes ani {
        0% {
            left: 0rem;
        }
        50% {
            left: 50rem;
        }
        100% {
            left: 0rem;
        }
        }

     
    </style>



    <script>
        console.log('hello world')

        //#8db9e0
    </script>

</head>
<body>
    <div class="container">
        <div class="path">
            <span id="elem" class="shape trail"><h1 data-text='[sample text sample text]'>sample text sample text</h1></span>
        </div>
    </div>

    
</body>
</html>

【问题讨论】：

搜索了一下发现这个链接：tobiasahlin.com/blog/curved-path-animations-in-css。这是你想要达到的目标吗？
您可以使用关键帧和图层来分道扬镳，但最终可能会分别为每个角色设置动画，因为关键帧基本上会沿直线移动物体。沿路径的 SVG 动画可能正是您所寻找的。span>

标签： html css text

【解决方案1】：

我还没有找到一种仅使用 CSS 沿路径为文本设置动画的方法。

使用 SVG 可以沿路径编写文本，然后通过更改 startOffset 属性对其进行动画处理。 startOffset 表示文本应该从路径开始多远。比如这篇文章https://css-tricks.com/moving-text-on-a-curved-path/使用Javascript修改属性。

寻求非 JS 解决方案，似乎不可能使用 CSS 为此类文本设置动画，但我们可以使用 SVG 自己的动画功能。这个 sn-p 采用 CSS-tricks 文章中使用的路径，但添加了动画标签，这些标签沿路径向一个方向移动文本，然后反转移动，每个都在另一个完成时重复。 CSS 用于旋转包含的 div。

body {
  width: 100%;
  height: 100%;
}
div {
  transform: rotate(20deg);
  font-family: Arial, Helvetica, sans-serif;
  position: fixed;
  top:40%;
  width: 100%;
  overflow: hidden;
}
svg {
  font-size:50px;
}

<div>
  <svg width="100%" height="200px" viewBox="0 0 1098.72 89.55">
    <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
    <text width="100%" style="transform:translate3d(0,0,0);">
        <textPath id="text-path" style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve"> 
               sample text sample text
             <animate id="anim1" attributeName="startOffset"
               from="0" to="600"
               begin="0s;anim2.end" dur="5s"
               repeatCount="1"
             />
             <animate id="anim2" attributeName="startOffset"
                from="600" to ="0"
                begin="anim1.end" dur="5s"
                repeatCount="1"
             />
         </textPath>
    </text>
  </svg>
</div>

【讨论】：