哈哈~~这个太好了！我是先听了任素汐的歌曲，就做了AI视频，线条的作用是歌词中唱的那些缠绕无奈。我想将 ...
缩放很容易实现，给它设个宽度就解决了
<style>
#oBlk {
width: 60vw;
height: 40vw;
position: relative;
margin: auto;
background: url(https://ff.xiaoqiaodali.top:5401/i/2026/06/14/6a2e8367298ac.gif) no-repeat center/cover;
margin:40px auto 32px calc(50% - 30vw - 81px);
/* 蚊香盘样式 */
#mySVG {
width: 200px;
position:absolute; left:0px;bottom:0px;
use {
fill: none;
stroke: url(#grad);
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 4 2;
stroke-dashoffset: 0;
opacity: .65;
animation: sMove ease-in-out 8s infinite alternate;
}
}
}
@keyframes sMove {
to {
stroke-dashoffset: -180;
}
}
</style>
<div id="oBlk">
<svg id="mySVG" viewBox="0 0 160 90">
<defs>
<linearGradient id="grad">
<stop offset="0" stop-color="pink" />
<stop offset="0.5" stop-color="yellow" />
<stop offset="1" stop-color="skyblue" />
</linearGradient>
</defs>
</defs>
<symbol id="symb">
<path d="M 80 45 C 80 30, 60 30, 60 45 C 60 60, 100 60, 100 45 C 100 20, 40 20, 40 45 C 40 70, 120 70, 120 45" />
</symbol>
<use href="#symb" x="0" y="0"/>
<use href="#symb" x="10" y="0" />
<use href="#symb" x="30" y="0" />
</svg>
</div>
也曾年轻 发表于 2026-6-15 12:45
缩放很容易实现，给它设个宽度就解决了
#oBlk {
好的，我学习一下！这样很精致，可以有更多用途，做个小播就很别致呢。谢谢也曾年轻！！{:4_199:}{:4_204:}{:4_190:}
本帖最后由 也曾年轻 于 2026-6-15 21:16 编辑 <br /><br />另一个图形，控制视频播放。
<style>
#outBlk {
width:960px;
height: 540px;
position: relative;
margin:40px auto 32px calc(50% - 561px);
/* 蚊香盘样式 */
#mSVG {
width: 100px;
position:absolute; right:5px;top:5px;
#svg_1 {
fill: transparent;
stroke: url(#grd);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 5 3;
SSSstroke-dashoffset: 0;
opacity: .65;
animation: aMove ease-in-out 8s infinite alternate;
z-index:10;
}
}
#vid {position: absolute; z-index: 1; left: 0; top:0; width: 100%;object-fit: cover; z-index:0}
}
</style>
<div id="outBlk">
<video src="https://img2.tukuppt.com/video_show/3664703/00/02/03/5b4f3c440b285.mp4" loop autoplay id="vid"></video>
<svg id="mSVG" viewBox="0 0 100 100">
<defs>
<linearGradient id="grd">
<stop offset="0" stop-color="red" />
<stop offset="0.5" stop-color="green" />
<stop offset="1" stop-color="skyblue" />
</linearGradient>
</defs>
</defs>
<path stroke="#000" id="svg_1" d="m13.29231,31.39753c0.00207,-0.82452 0.70735,-5.87986 1.56786,-11.23413c2.6832,-16.69562 2.72267,-16.7693 6.12941,-11.44803l2.01557,3.14829l5.89451,-3.11382c7.79659,-4.11858 17.09974,-5.64218 25.6515,-4.20097c3.63013,0.61181 7.48196,1.6062 8.55964,2.20975c2.13961,1.19826 2.00246,2.22731 -1.40768,10.56178c-1.86902,4.56798 -2.04842,4.69817 -5.27694,3.82968c-5.49505,-1.47812 -14.44257,-1.01255 -18.76247,0.9763l-4.05033,1.8648l2.84303,3.10537c1.56367,1.708 2.44948,3.35995 1.96847,3.67103c-0.48102,0.31109 -6.33338,0.91742 -13.00523,1.34734c-10.01003,0.64508 -12.13007,0.51971 -12.12735,-0.71737l0,0zm51.54381,46.03324l-4.33626,-6.01018l3.94819,-3.99526c4.06359,-4.11198 6.99431,-9.88515 8.28546,-16.32148l0.73682,-3.67295l-4.24973,0.7111c-2.33736,0.39116 -4.26412,0.34033 -4.28169,-0.1129c-0.08207,-2.116 11.03084,-22.97503 12.11102,-22.73254c1.69843,0.38127 18.93004,15.99931 18.93004,17.15736c0,0.51687 -1.81098,1.24282 -4.02437,1.6132l-4.02438,0.6734l-0.39719,7.1815c-0.50943,9.21056 -5.14736,19.8408 -11.60464,26.59813c-2.58627,2.70648 -5.16463,4.92085 -5.72966,4.92085c-0.56505,0 -2.97867,-2.70463 -5.36361,-6.01024l0,0zm-39.14347,16.84608c0,-0.66455 0.68125,-2.58686 1.51389,-4.27182c1.51067,-3.05705 1.50192,-3.07189 -4.12995,-6.98502c-8.81149,-6.12235 -15.36107,-16.98915 -17.42121,-28.9046l-0.6754,-3.9064l4.8156,-0.6907c9.9268,-1.42385 10.01745,-1.38081 12.00554,5.69929c1.34156,4.77765 2.99156,7.6408 6.54837,11.36287c2.61519,2.73672 5.12029,4.7395 5.5669,4.45066c0.44659,-0.28883 1.093,-1.99551 1.43647,-3.79264c0.34347,-1.79713 1.05967,-3.26752 1.59155,-3.26752c1.22115,0 12.72065,18.97422 12.90321,21.29033c0.12192,1.54691 -6.0944,4.22526 -22.29509,9.60608c-1.03303,0.3431 -1.85988,0.08061 -1.85988,-0.59055l0,0z">
<animateattributename="stroke-dashoffset" from='0' to='-180' begin="0" dur='8' repeatCount="indefinite"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="-360 50 50" dur="4s" repeatCount="indefinite" />
</path>
</svg>
</div>
<script>
mSVG.onclick = () => {
vid.paused ? (vid.play(),mSVG.unpauseAnimations()) : (vid.pause(),mSVG.pauseAnimations());
}
</script>
也曾年轻 发表于 2026-6-15 20:30
另一个图形，控制视频播放。
#outBlk {
也曾年轻晚上好~~各个三个箭头的很有创意！在箭头的内环做成圆形的文字标题，就是一个很有特点的标题LOGO ！
特别喜欢，很是赞佩您的奇思妙想，感谢您的无私分享，祝您安好！！
霜染枫丹 发表于 2026-6-15 20:42
也曾年轻晚上好~~各个三个箭头的很有创意！在箭头的内环做成圆形的文字标题，就是一个很有特点的标题LOGO ...
网上找现成的，让我想破脑壳也做不出来{:5_102:} 也曾年轻 发表于 2026-6-15 20:47
网上找现成的，让我想破脑壳也做不出来
不在其位不谋其政，我的很多素材也是拿来主义，就像轮播图，就是从您那里顺来的{:4_173:}{:4_204:}
霜染枫丹 发表于 2026-6-15 20:55
不在其位不谋其政，我的很多素材也是拿来主义，就像轮播图，就是从您那里顺来的
网上找SVG 编辑器， 里面含有各种各样的图形。例如
https://www.jyshare.com/more/svgeditor/
也曾年轻 发表于 2026-6-15 21:05
网上找SVG 编辑器， 里面含有各种各样的图形。例如
https://www.jyshare.com/more/svgeditor/
谢谢也曾年轻，我收藏了，这是好东东~~{:4_199:}{:4_204:}{:4_190:}
页:
1
[2]