独处

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #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; }
   
3. #player { position: absolute; right: 10px; bottom: 10px; cursor: pointer; filter: drop-shadow(2px 1px 4px #000); }
   
4. @keyframes bgmove { to { background-position: -10px -5px, center }; }
   
5. </style>
   
6. 
   
7. <div id="tz">
   
8.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=498210" autoplay loop></audio>
   
9.         <svg id="player" width="400" height="40" viewBox="-50 -5 100 10" style="">
   
10.                 <g style="fill="none" stroke="green" stroke-width="10" stroke-dasharray="4" >
    
11.                         <line x1="-50" y1="0" x2="50" y2="0"></line>
    
12.                         <line x1="-50" y1="0" x2="50" y2="0" stroke="lightgreen">
    
13.                                 <animate attributeName="stroke-dashoffset" values="0;2;0;-2;0" dur="1.5s" repeatCount="indefinite"></animate>
    
14.                         </line>
    
15.                 </g>
    
16.         </svg>
    
17. </div>
    
18. 
    
19. <script>
    
20. mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
    
21. aud.onplaying = aud.onpause = () => mState();
    
22. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
23. </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是计算机的心脏。

梦江南

谢谢老师的详细讲解，辛苦了！

红影

马黑黑 发表于 2024-9-25 08:20
CSS动画性能之所以优于svg动画，是因为css3天然启用了GPU加速，很大程度上减轻CPU的负担，同时GPU对动画的 ...

“GPU是显卡的心脏，CPU是计算机的心脏。”
这个还是头一次知道呢

红影

这个帖子又是看点多多，小播竟然有很强的立体感，而且是描边虚线线段的往复带来的效果，svg运用的又一个奇特之处。svg的功能就在那里，如何运用才是最强大的能力

红影

<svg id="player" width="400" height="40" viewBox="-50 -5 100 10" style="">
这个很奇特，还以为viewBox也应该是400和40啊，去看了看，图像变小了，我得再去学一下viewBox了

红影

“@keyframes 动画将第一张图做背景图片位置的细微偏移的循环变化。”
这个运用也很奇妙

红影

在这个帖子里又能学到很多东西，谢谢黑黑

红影

红影 发表于 2024-9-25 09:10
这个很奇特，还以为viewBox也应该是400和40啊，去看了看，图像变小了，我得再去学一下viewBox了

去搜了一下，原来viewBox设置400 40是图像不变，而只要viewBox和设置的宽高不一样，就是两者较小的按比例缩放，所以当viewBox的宽被设置成100，画出的线性就被放大4倍，如果是600，就被缩小400/600倍，这个是宽方向，高方向一样。
viewBox前面的两个数字是定位，和通常的相反，负值是往右移动，正值才是往左。如此来说，设置正值反倒把内容整到框外去了啊。当然前面两个参数和缩放无关。
整明白了，语言比较混乱，我自己能明白就行

红影

基于 stroke-dasharray + stroke-dashoffset 的svg动画演示的实例，学习了

花飞飞

马黑黑 发表于 2024-9-25 08:12
本帖：

（一）基于 stroke-dasharray + stroke-dashoffset 的svg动画演示，帖子右下角的小播效果就是它 ...

再看这个说明，解决我的大问题，@keyframes 动画将第一张图。原来谁是第一张就作用于谁。。
关于小播动画，果然是在第二条线里的~~刚才没看仔细，有疑惑了一下。。

花飞飞

马黑黑 发表于 2024-9-25 08:17
CSS3完美支持基于 stroke-dash* 的动画，因此，帖子的svg animate 动画标签可以去掉，相关属性也可以去掉， ...

这样原始代码的SVG动画和存成图片的SVG动画，差别在哪里。。。

小辣椒

这个播放器有别样的感觉，像钢琴键，而且可以联动上面的叶子

花飞飞

马黑黑 发表于 2024-9-25 08:20
CSS动画性能之所以优于svg动画，是因为css3天然启用了GPU加速，很大程度上减轻CPU的负担，同时GPU对动画的 ...

Gpu才听说，CPU到是常听到

马黑黑

花飞飞 发表于 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到是常听到