查看: 171|回复: 15

[特效] 烟雨

[复制链接]
发表于 2024-12-7 08:10 | 显示全部楼层 |阅读模式

评分

6

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-12-7 08:10 | 显示全部楼层

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.css';
	#tz { margin: 30px 0 30px calc(50% - 641px); width: 1280px; height: 731px; background: url('https://638183.freep.cn/638183/t24/5/yjyu.jpg') no-repeat center/cover; }
	#mplayer { --tx: 0; --ppNum: 35; --ppBg: null; --ppLen: 3px; --ppCap: #ddd; --prog: red; --track: silver; bottom: 80px; color: lightgreen; }
	#fsbtn { bottom: 20px; color: white; border-color: white; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1837799288"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/07/19/09/58/29/video6699c8452db90.mp4" autoplay loop muted></video>
	<!--div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div-->
	<div id="fsbtn" class="fsbtn"></div>
</div>

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

评分

4

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-12-7 08:14 | 显示全部楼层

圆环频谱播放器重新封装成ES6模块,模块的设置主要基于频谱样式、进度条颜色、文本前景色等少量几个方面,在帖子前台css代码的 #mplayer 选择器中完成:


#mplayer {
    --tx: 0; /* 正频谱或斜频谱设置,0 为斜频谱,1 为正频谱 */
    --ppNum: 25; /* 频谱条数(缺省30) */
    --ppBg: null; /* 频谱颜色,null 或缺省变量表示使用随机色 */
    --ppLen: 3px; /* 频谱宽度(缺省4px) */
    --ppCap: #ddd; /* 频谱帽颜色(该颜色将参与到频谱渐变色中缺省white)*/
    --prog: purple; /* 进度之色颜色(缺省red) */
    --track: silver; /* 进度条底色(缺省silver) */
     bottom: 80px; /* 定位,也可以使用top属性 */
    color: lightgreen; /* 前景色即文本颜色(缺省未设置,默认黑色) */
}

-- 的为CSS变量,都可以缺省,即不要。缺省时将使用模块的默认配置。其他的css设置,比如帖子父元素继续使用 class="pa"、video class="vid" 等对应类选择器以应用引入的CSS资源文档的相关设置,详情与之前的模块大同小异。

评分

4

查看全部评分

点评
回复

使用道具

发表于 2024-12-7 10:22 | 显示全部楼层
欣赏凡哥老师带来的精美作品!
点评
回复

使用道具

发表于 2024-12-7 10:22 | 显示全部楼层
问好凡哥老师谢谢你的精彩分享!
点评
回复

使用道具

发表于 2024-12-7 10:22 | 显示全部楼层
祝凡哥老师周末快乐,创作愉快!
点评
回复

使用道具

发表于 2024-12-7 11:53 | 显示全部楼层
老师今天封了一下圆环频谱播放器,这个有正频谱和斜频谱两种的。。记得上次可以整个水滴状的小尾巴,十分漂亮。。
点评
回复

使用道具

发表于 2024-12-7 11:55 | 显示全部楼层
这个视频大气震憾,非常惊艳,特别是全屏,有点黄河之水天上来的意味。。。创意很绝。。
点评
回复

使用道具

发表于 2024-12-7 11:58 | 显示全部楼层
凡哥 发表于 2024-12-7 08:14
圆环频谱播放器重新封装成ES6模块,模块的设置主要基于频谱样式、进度条颜色、文本前景色等少量几个方面, ...

这里一下子有两种频谱效果,正的和斜的都封在一个包里的,真是让使用者怎么方便怎么来。。
条数颜色,宽度帽色,这些都可以自己设置。。
老师设想的非常仔细且周到。。
点评
回复

使用道具

发表于 2024-12-7 13:05 | 显示全部楼层
惊艳!谢谢凡哥老师精彩分享!
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-9 23:55

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表