黑黑这个播放器还是加进了歌词同步{:4_199:}
小辣椒 发表于 2022-10-21 18:58
黑黑这个播放器还是加进了歌词同步
加歌词同步不复杂的，现成的东东，拼凑一下下
这个播放器颜色也是改了和背景图图同色了，黑黑辛苦{:4_187:}
小辣椒 发表于 2022-10-21 18:59
这个播放器颜色也是改了和背景图图同色了，黑黑辛苦
可以随意改的
马黑黑 发表于 2022-10-21 18:09
一般般的不高
佩服黑黑朋友。
梦油 发表于 2022-10-21 20:39
佩服黑黑朋友。
{:4_191:}
夕颜花 好看好听{:4_178:}
朵拉 发表于 2022-10-22 19:17
夕颜花 好看好听
还行
这个按钮不稳定
亚伦影音工作室 发表于 2022-10-22 21:40
这个按钮不稳定
理论上与系统的字体以及浏览器的字体个性设置有关：字体如果不合适，按钮就会摇晃。
本帖最后由 马黑黑 于 2022-10-23 11:55 编辑
小辣椒 发表于 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;">☀
<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下文本按钮的旋转基点会因浏览器环境变化而受到影响，对移动设备的兼容性不友好，我已将原帖的文 ...
黑黑辛苦，又修改了{:4_187:}
这个播放器我前面做过，感觉挺好的
小辣椒 发表于 2022-10-23 12:56
这个播放器我前面做过，感觉挺好的
之前，用svg text标签的话，手机看按钮会绕小圈
小辣椒 发表于 2022-10-23 12:55
黑黑辛苦，又修改了
{:4_181:}
马黑黑 发表于 2022-10-23 15:23
之前，用svg text标签的话，手机看按钮会绕小圈
哦，这个没有注意的
马黑黑 发表于 2022-10-23 15:23
之前，用svg text标签的话，手机看按钮会绕小圈
哦，对了我看见的，以为是效果的
马黑黑 发表于 2022-10-23 15:23
喝茶{:4_180:}{:4_173:}
小辣椒 发表于 2022-10-23 18:08
喝茶
好茶，好茶！
去年买的新茶吧？非常不错{:4_170:}
小辣椒 发表于 2022-10-23 18:07
哦，对了我看见的，以为是效果的
不是哦。我花了好大力气计算基点，在电脑上木有问题，到手机上就有，敢情电脑和手机不是亲家{:4_170:}