时间戳

首页 > 解决方案 > 如何使文本在弯曲的路径上来回移动 HTML CSS

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

问题描述

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

<!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>

标签： htmlcsstext

解决方案

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

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

寻求非 JS 解决方案，似乎不可能使用 CSS 为此类文本设置动画，但我们可以使用 SVG 自己的动画功能。该片段采用 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>

推荐阅读