欣赏，学习，收藏了，谢谢！
此程式中CSS动画厍版本是4.1.1最新版本的！
红枫 发表于 2022-8-20 21:33
欣赏，学习，收藏了，谢谢！
此程式中CSS动画厍版本是4.1.1最新版本的！
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif
感觉是 v4 花样多点。
<style type="text/css">
.tab {position:relative;width:800px; height:550px; margin:30px auto;border:0px #cccccc solid; }
</style>
<div class="tab" >
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 210 297" height="297mm" width="210mm">
<defs id="defs2"/>
<metadata id="metadata5">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1">
<path id="path815"
d="m 17.197916,53.054167 c 0,0 18.25625,-39.952084 46.0375,-18.785416 C 91.016666,55.435417 58.208333,73.1625 81.227082,69.19375 104.24583,65.225 77.522916,49.879167 104.775,43.264584 c 27.25208,-6.614583 1.32292,27.78125 32.01458,20.6375 30.69167,-7.14375 4.23333,-21.960417 24.07708,-32.014583 19.84375,-10.054168 23.54792,0.79375 27.51667,6.879166 3.96875,6.085417 2.11667,27.516667 -10.84792,33.866667 -12.96458,6.35 -8.73125,38.893746 -33.07291,31.220836 -24.34167,-7.67292 -8.46667,23.01875 -33.60208,9.525 -25.135421,-13.493753 -21.960421,8.20208 -44.185421,-5.02709 -22.225,-13.229163 -8.995833,29.36875 -29.897916,8.46667 C 15.875,95.916667 27.78125,116.28958 26.9875,93.270833 26.19375,70.252084 50.270833,87.45 50.270833,87.45" style="fill:none; stroke:transparent; stroke-width:0.52916667; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; stroke-miterlimit:4; stroke-dasharray:none"/>
</g>
<text id="text" font-size="8" fill="red">
<textpath id="textpth" xlink:href="#path815" textLength="200" startOffset="0">
欣赏佳作！谢谢老师分享！遥祝安好！
</textpath>
</text>
</svg>
</div>
<script type="text/javascript" src="https://jianghaijun4031.github.io/svgSnap/js/snap.svg-min.js"></script>
<script type="text/javascript">
var xian = Snap("#path815");
var yuan = Snap("#textpth");
ax();
function ax() {
Snap.animate(0, xian.getTotalLength(), function (val) {
yuan.attr({
startOffset: val
})
}, 14500, function () {
bx();
});
}
function bx() {
Snap.animate(xian.getTotalLength(), 0, function (val) {
yuan.attr({
startOffset: val
})
}, 14500, function () {
ax()
})
}
</script>
寒冬残荷 发表于 2022-8-23 20:26
.tab {position:relative;width:800px; height:550px; margin:30px auto;border:0px #cccccc solid;...
网上得的文字沿着曲线运动的代码，在线测试运行动的，放在这里不动，也编辑（想删除）不了！:lol
寒冬残荷 发表于 2022-8-23 20:26
.tab {position:relative;width:800px; height:550px; margin:30px auto;border:0px #cccccc solid;...
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif
寒冬残荷 发表于 2022-8-23 20:29
网上得的文字沿着曲线运动的代码，在线测试运行动的，放在这里不动？
又要玩新花样啊，都有点力不从心的感觉了:lol
195400 发表于 2022-8-20 23:42
感觉是 v4 花样多点。
老师用的是4.1.1版本，因使用格式比V3麻烦，在JS中下划线如何写我没有学会，所以我用V3{:1_1:}。
195400 发表于 2022-8-23 20:37
<style>
#div1{background-image:url(https://pic.imgdb.cn/item/6300e81416f2c2beb1eeb7b6.gif); background-size:cover; width:1000; height:220px; font-size:70pt; text-align:center; font-weight:bold; line-height:200px; color:transparent; -webkit-background-clip:text; border:0px #FF4A20 solid; }
</style>
<div id="div1">老师，晚上好！</div>
寒冬残荷 发表于 2022-8-23 20:26
.tab {position:relative;width:800px; height:550px; margin:30px auto;border:0px #cccccc solid;...
凑合一个
<div>
<svg width="100%" height="100%" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="42.5" stroke="red">
<textPath xlink:href="#MyPath">
欣赏佳作！谢谢老师分享！遥祝安好！
<animate attributeName="startOffset" from="0" to ="830" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
<!-- Show outline of the viewport using 'rect' element -->
</svg>
</div>
寒冬残荷 发表于 2022-8-23 20:42
老师用的是4.1.1版本，因使用格式比V3麻烦，在JS中下划线如何写我没有学会，所以我用V3。
和v3一样的就是类名有个前缀animate__