曲線文字（+動畫）

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>