曲线文字（+动画）

Question

我想在我网站的一角有一个横幅，在一个响应式 div 中带有弯曲和动画（无限横幅样式）文本。

像这样：

我是编程方面的菜鸟，也尝试根据其他示例使用 .svg 进行编程，但运气不佳。

photoshop 中的原始曲线是“Arc upper”（+47%）

非常感谢任何帮助！ 一种

Answer 1

我不确定这是否是您想要的，但希望它有效：

 function curvedText(time) { var tl = new TimelineMax({ repeat: -1 }); var text = document.querySelector("svg textpath"), path = document.querySelector("svg defs path"); var from = { transformOrigin: "center center", rotation: 0, }; var to = { rotation: -360, ease: Linear.easeInOut, }; tl.fromTo([text, path], time, from, to); return tl; } curvedText(20);

 body { position: relative; } div { position: fixed; right: 0; bottom: 0; width: 400px; height: 200px; /* border: 1px solid black; */ overflow: hidden; } svg:not(:root) { overflow: visible; } svg { position: absolute; right: 50px; bottom: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="150 -400 600 600"> <defs> <path id="txt-path" d="M50, 800a800, 800 0 1, 1 1600, 0a800, 800 0 1, 1 -1600, 0"></path> </defs> <text fill="red" font-size="70px" font-family="Helvetica Neue" font-weight="600"> <textPath startOffset="1000" xlink:href="#txt-path"> I'm trying to have a banner in the corner of my website with curved and animated (infinite banner style) text inside a responsive div. </textPath> </text> </svg> </div>

不要忘记将CDN添加到您的代码中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>