菩萨吟

凡哥

凡哥

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/anklet_lrc.css';
	#pa { margin: 30px 0 30px calc(50% - 691px); width:1200px; height: 700px; background: url('https://638183.freep.cn/638183/t24/webp3/pusayb.webp') no-repeat center/cover; }
	#mplayer { width: 200px; height: 200px; color: snow; bottom: 40px; --color1: white; --color2: gray; --prog: red; --track: white; --bRad: 50% 80%; --btnBg: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') center/cover; }
	#fsbtn { right: 200px; bottom: 20px; }
</style>

<div id="pa" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=2067797122"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/08/05/36/video6365a8d06c60e.mp4" autoplay loop muted></video>
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/anklet_lrc.js';
hcplay(pa);
fscreen.fs(pa, fsbtn);
</script>

凡哥

播放控制器配置：
#mplayer {
    width: 200px; /* 宽度 缺省值 160px */
    height: 200px; /* 高度 缺省值 160px */
    color: snow; /* 文本颜色 缺省值 lightblue */
    left: 45%; /* 横向定位 支持 right 属性 */
    bottom: 40px; /* 纵向定位 支持 top 属性*/
    --color1: white; /* 脚镯珠子主色  缺省词变量每一粒珠子都使用随机色*/
    --color2: gray; /* 脚镯珠子内阴影颜色 缺省此变量模块自配 */
    --prog: red; /* 播放进度指示颜色 缺省默认红色 */
    --track: white; /* 进度底轨颜色 缺省值 tan */
    --bRad: 50% 80%; /* 脚镯珠子 border-radius  属性值 缺省为 50% 100% */
     /* 以下是播放按钮背景 缺省时是一个多彩光盘；圆形，支持图片、渐变 */
    --btnBg: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') center/cover;
}

可定义的属性、变量相对比较多，可以根据需要或使用全部或部分默认设置，以减少代码量，或全自设上述属性，以丰富播放器外观。

模块一样通过 css 的 @import 方法引用对应的 css 资源文档，和前面的几个模块一样，集成有LRC歌词同步、视频等样式设置，都可以通过对应的 #选择器重设相关样式。

清梦

沙发

清梦

欣赏凡哥老师带的精美作品！

清梦

问好凡哥老师感谢你的精彩，祝创作愉快新周快乐！

清梦

期待老师更多佳作分享！

花简静

这个经典的漂亮脚链小播也整出极简版。。。
这个效果十分好看。。
珠子质地都跟玉似的，无论调成什么颜色看着都温润之极。。

花简静

凡哥 发表于 2024-12-2 13:37
播放控制器配置：
#mplayer {
    width: 200px; /* 宽度 缺省值 160px */

这一楼对小播的每个属性都进行了介绍，做贴子的时候更好用了。。

花简静

大慈大悲观世音菩萨庄严肃穆，飞花飘落，头顶那束光更是神圣。。
作品创意和实现手法都是一流。。
大赞。。