夕颜花

小辣椒

黑黑这个播放器还是加进了歌词同步

马黑黑

小辣椒 发表于 2022-10-21 18:58
黑黑这个播放器还是加进了歌词同步

加歌词同步不复杂的，现成的东东，拼凑一下下

小辣椒

这个播放器颜色也是改了和背景图图同色了，黑黑辛苦

马黑黑

小辣椒 发表于 2022-10-21 18:59
这个播放器颜色也是改了和背景图图同色了，黑黑辛苦

可以随意改的

梦油

马黑黑 发表于 2022-10-21 18:09
一般般的不高

佩服黑黑朋友。

马黑黑

梦油 发表于 2022-10-21 20:39
佩服黑黑朋友。

朵拉

夕颜花 好看好听

马黑黑

朵拉 发表于 2022-10-22 19:17
夕颜花 好看好听

还行

亚伦影音工作室

这个按钮不稳定

马黑黑

亚伦影音工作室 发表于 2022-10-22 21:40
这个按钮不稳定

理论上与系统的字体以及浏览器的字体个性设置有关：字体如果不合适，按钮就会摇晃。

马黑黑

小辣椒 发表于 2022-10-21 18:59
这个播放器颜色也是改了和背景图图同色了，黑黑辛苦

由于svg下文本按钮的旋转基点会因浏览器环境变化而受到影响，对移动设备的兼容性不友好，我已将原帖的文本按钮换成了渐变圆形按钮。原先的这部分代码：

                <text x="10" y="35" font-size="40" dominant-baseline="middle" stroke="tan" fill="purple" id="btnplay" style="cursor: pointer;">&#9728;
                        <animateTransform attributeName="transform" dur="4s" type="rotate" from="0 26.86 30" to="360 26.86 30" repeatCount="indefinite" />
                </text>

改为：

                <circle cx="25" cy="30" r="15" fill="url(#bgcolor)" id="btnplay" style="cursor: pointer;">
                        <animateTransform attributeName="transform" dur="3s" type="rotate" from="0 25 30" to="360 25 30" repeatCount="indefinite" />
                </circle>
                <defs>
                        <linearGradient x1="0%" y1="0%" x2="100%" y2="50%" id="bgcolor">
                                <stop offset="0%" style="stop-color: pink; stop-opacity:0.8" />
                                <stop offset="100%" style="stop-color: green; stop-opacity:0.75" />
                        </linearGradient>
                </defs>

小辣椒

马黑黑 发表于 2022-10-23 11:53
由于svg下文本按钮的旋转基点会因浏览器环境变化而受到影响，对移动设备的兼容性不友好，我已将原帖的文 ...

黑黑辛苦，又修改了

小辣椒

这个播放器我前面做过，感觉挺好的

马黑黑

小辣椒 发表于 2022-10-23 12:56
这个播放器我前面做过，感觉挺好的

之前，用svg text标签的话，手机看按钮会绕小圈

马黑黑

小辣椒 发表于 2022-10-23 12:55
黑黑辛苦，又修改了

小辣椒

马黑黑 发表于 2022-10-23 15:23
之前，用svg text标签的话，手机看按钮会绕小圈

哦，这个没有注意的

小辣椒

马黑黑 发表于 2022-10-23 15:23
之前，用svg text标签的话，手机看按钮会绕小圈

哦，对了我看见的，以为是效果的

小辣椒

马黑黑 发表于 2022-10-23 15:23

喝茶

马黑黑

小辣椒 发表于 2022-10-23 18:08
喝茶

好茶，好茶！
去年买的新茶吧？非常不错

马黑黑

小辣椒 发表于 2022-10-23 18:07
哦，对了我看见的，以为是效果的

不是哦。我花了好大力气计算基点，在电脑上木有问题，到手机上就有，敢情电脑和手机不是亲家