独处
<style>#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp2/uuvi.webp') no-repeat 0 0 / 612px 408px, url('https://638183.freep.cn/638183/t24/4/gg.jpg') no-repeat center/cover; box-shadow: 0 0 4px #111; z-index: 1; animation: bgmove 3s linear infinite alternate var(--state); position: relative; }
#player { position: absolute; right: 10px; bottom: 10px; cursor: pointer; filter: drop-shadow(2px 1px 4px #000); }
@keyframes bgmove { to { background-position: -10px -5px, center }; }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=498210" autoplay loop></audio>
<svg id="player" width="400" height="40" viewBox="-50 -5 100 10" style="">
<g style="fill="none" stroke="green" stroke-width="10" stroke-dasharray="4" >
<line x1="-50" y1="0" x2="50" y2="0"></line>
<line x1="-50" y1="0" x2="50" y2="0" stroke="lightgreen">
<animate attributeName="stroke-dashoffset" values="0;2;0;-2;0" dur="1.5s" repeatCount="indefinite"></animate>
</line>
</g>
</svg>
</div>
<script>
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
帖子代码
<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp2/uuvi.webp') no-repeat 0 0 / 612px 408px, url('https://638183.freep.cn/638183/t24/4/gg.jpg') no-repeat center/cover; box-shadow: 0 0 4px #111; z-index: 1; animation: bgmove 3s linear infinite alternate var(--state); position: relative; }
#player { position: absolute; right: 10px; bottom: 10px; cursor: pointer; filter: drop-shadow(2px 1px 4px #000); }
@keyframes bgmove { to { background-position: -10px -5px, center }; }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=498210" autoplay loop></audio>
<svg id="player" width="400" height="40" viewBox="-50 -5 100 10" style="">
<g style="fill="none" stroke="green" stroke-width="10" stroke-dasharray="4" >
<line x1="-50" y1="0" x2="50" y2="0"></line>
<line x1="-50" y1="0" x2="50" y2="0" stroke="lightgreen">
<animate attributeName="stroke-dashoffset" values="0;2;0;-2;0" dur="1.5s" repeatCount="indefinite"></animate>
</line>
</g>
</svg>
</div>
<script>
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖：
（一）基于 stroke-dasharray + stroke-dashoffset 的svg动画演示，帖子右下角的小播效果就是它。这里使用内嵌svg代码的方式，使用纯svg方法，通过 stroke-dasharray 属性设置描边形态为 4线段4间隔 的虚线，共两组这样的 line 标签，尺寸位置相同，描边色不同；然后，第二个 line 标签加入animate 动画，通过 stroke-dashoffset 位移描边虚线线段使之与原位有规律地交错，其底层的 line 则做原位参照，两个 line 共同作用产生立方体整体转动效果（实际表现是底层的 line 不动，上层的line虚线线段偏移，总体是上line和xxline来回摩擦）。
（二）左上角树枝的动画是纯CSS动画：帖子容器共两种背景图片，@keyframes 动画将第一张图做背景图片位置的细微偏移的循环变化。 CSS3完美支持基于 stroke-dash* 的动画，因此，帖子的svg animate 动画标签可以去掉，相关属性也可以去掉，取而代之的是用CSS中设置相应属性并用@keyframes 设计动画。
CSS动画性能优于svg，不过，svg动画的一些细节表现要强于CSS动画。一般的取舍是，CSS能做到的尽量使用CSS动画，需要更丰富的动画细节的，选择svg动画。 CSS动画性能之所以优于svg动画，是因为css3天然启用了GPU加速，很大程度上减轻CPU的负担，同时GPU对动画的处理能力是天生的。
GPU是显卡的心脏，CPU是计算机的心脏。 谢谢老师的详细讲解，辛苦了！{:4_190:} 马黑黑 发表于 2024-9-25 08:20
CSS动画性能之所以优于svg动画，是因为css3天然启用了GPU加速，很大程度上减轻CPU的负担，同时GPU对动画的 ...
“GPU是显卡的心脏，CPU是计算机的心脏。”
这个还是头一次知道呢{:4_173:} 这个帖子又是看点多多，小播竟然有很强的立体感，而且是描边虚线线段的往复带来的效果，svg运用的又一个奇特之处。svg的功能就在那里，如何运用才是最强大的能力{:4_199:} <svg id="player" width="400" height="40" viewBox="-50 -5 100 10" style="">
这个很奇特，还以为viewBox也应该是400和40啊，去看了看，图像变小了，我得再去学一下viewBox了{:4_173:} “@keyframes 动画将第一张图做背景图片位置的细微偏移的循环变化。”
这个运用也很奇妙{:4_199:} 在这个帖子里又能学到很多东西，谢谢黑黑{:4_199:} 红影 发表于 2024-9-25 09:10
这个很奇特，还以为viewBox也应该是400和40啊，去看了看，图像变小了，我得再去学一下viewBox了
去搜了一下，原来viewBox设置400 40是图像不变，而只要viewBox和设置的宽高不一样，就是两者较小的按比例缩放，所以当viewBox的宽被设置成100，画出的线性就被放大4倍，如果是600，就被缩小400/600倍，这个是宽方向，高方向一样。
viewBox前面的两个数字是定位，和通常的相反，负值是往右移动，正值才是往左。如此来说，设置正值反倒把内容整到框外去了啊。当然前面两个参数和缩放无关。
整明白了，语言比较混乱，我自己能明白就行{:4_173:} 基于 stroke-dasharray + stroke-dashoffset 的svg动画演示的实例，学习了{:4_187:} 马黑黑 发表于 2024-9-25 08:12
本帖：
（一）基于 stroke-dasharray + stroke-dashoffset 的svg动画演示，帖子右下角的小播效果就是它 ...
再看这个说明，解决我的大问题，@keyframes 动画将第一张图。原来谁是第一张就作用于谁。。
关于小播动画，果然是在第二条线里的~~刚才没看仔细，有疑惑了一下。。{:4_173:}
马黑黑 发表于 2024-9-25 08:17
CSS3完美支持基于 stroke-dash* 的动画，因此，帖子的svg animate 动画标签可以去掉，相关属性也可以去掉， ...
这样原始代码的SVG动画和存成图片的SVG动画，差别在哪里。。。 这个播放器有别样的感觉，像钢琴键，而且可以联动上面的叶子{:4_199:} 马黑黑 发表于 2024-9-25 08:20
CSS动画性能之所以优于svg动画，是因为css3天然启用了GPU加速，很大程度上减轻CPU的负担，同时GPU对动画的 ...
Gpu才听说，CPU到是常听到{:4_173:} 花飞飞 发表于 2024-9-25 20:32
再看这个说明，解决我的大问题，@keyframes 动画将第一张图。原来谁是第一张就作用于谁。。
关于小播动 ...
不是这么理解。
多背景图片时，keyframes 设置背景图片的相关属性，一个都不能忽略。源码：
@keyframes bgmove { to { background-position: -10px -5px, center }; }
红色针对第一张，蓝色的针对第二张。第二张不变，继续使用 center 马黑黑 发表于 2024-9-25 08:20
CSS动画性能之所以优于svg动画，是因为css3天然启用了GPU加速，很大程度上减轻CPU的负担，同时GPU对动画的 ...
好像都要重新学起了 花飞飞 发表于 2024-9-25 20:35
Gpu才听说，CPU到是常听到
{:4_190:}