先上图：
未命名项目.gif代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background-image:url(ubw.png);"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <text id="txt" x="100" y="100" style="font-size:25px;"> http://www.toly1994.com----张风捷特烈 </text> </svg> <script src="jquery-3.3.1.js"></script> <script> var num = $('#txt').text().trim().length;//文字数目 var x = [];//x值的数组 var s = 40;//波峰/谷 var w = 1;// var y = null;//y值的数组 var t = 0; for (let i = 0; i < num; i++) { x.push(20); } /** * 确定y值 */ function arrange(t) { y = []; var ly = 0, cy; for (let i = 0; i < num; i++) { cy = -s * Math.sin(w * i + t); y.push(cy - ly); ly = cy; } } /** * 渲染函数，动态改变 */ function render() { $('#txt').attr("dx", x.join(' ')); $('#txt').attr("dy", y.join(' ')); } /** * 动画 */ function frame() { t += 0.03; arrange(t); render(); requestAnimationFrame(frame);//动画 } frame(); </script> </body> </html>转载于:https://www.cnblogs.com/toly-top/p/9781981.html
相关资源：纯CSS3正弦波浪动画特效.zip