滚滚长江东逝水

马黑黑

马黑黑

帖子代码：

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://file.uhsea.com/2310/d6a8d80e63f94699c69b296e45dafca1CF.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa::before, #papa::after { position: absolute; content: url('https://file.uhsea.com/2310/5e73a209c889ccc1a38440e006beff45ZJ.gif'); top: 0; mix-blend-mode: screen; opacity: .75; }
#papa::after { top: calc(100% - 188px); opacity: .25; }
</style>

<div id="papa">
	<audio id="aud" src="https://file.uhsea.com/2310/89e20b56d339cf95386329404fe55ef9DL.mp3" autoplay loop></audio>
</div>

<script>

(function() {
	let lrcAr = [ [2,"杨洪基 - 滚滚长江东逝水",6], [56.09,"滚滚长江东逝水",8.4], [65.1,"浪花淘尽英雄",8.6], [75.1,"是非成败转头空",8.5], [84.07,"青山依旧在",3.7], [88.18,"几度夕阳红",3.8], [101.02,"白发渔樵江渚上",7.5], [110.04,"惯看秋月春风",6.3], [118.09,"一壶浊酒喜相逢",6.9], [126,"古今多少事",2.5], [130.00,"都付笑谈中",9.2], [140.04,"一壶浊酒喜相逢",7.4], [148.56,"古今多少事",3.0], [151.09,"都付笑谈中",15] ];
	let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
		js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
	let loadJs = (url,callback) => {
		let body = document.querySelector('body'), jsNode = document.createElement('script');
		jsNode.charset = 'utf-8';
		jsNode.setAttribute('src', url);
		body.appendChild(jsNode);
		jsNode.onload = () => callback();
	};
	loadJs(js1, () => {
		HCPlayer({
			papa: '#papa',
			lrcAr: lrcAr,
			lrc_css: 'bottom: 20px;',
			fs_css: 'transform: translate(0,-35px); background: transparent;',
			player_css: 'width: 200px; height: 100px; bottom: 70px; filter: hue-rotate(90deg);',
			path: 'M5 50 L10 45 Q35 80 50 50 T100 70 T160 70 T 195 65',
			btn: {left: 64, top: 0},
			track: {track: 'olive', prog: 'darkred'},
			img: {play: '', pause: ''}
		});
	});

	loadJs(js2, () => {
		H5lz({
			papa: '#papa',
			total: 25,
			size: {width: 18, height: 18},
			shape: {background: 'url("https://file.uhsea.com/2310/43504e3a64e8c4097e61d90b8ec49e02L3.png") no-repeat center/cover', borderRadius: ''},
			ani: 'toBottom',
			maxTime: 30,
			offset: {x: 0, y: 0},
		});
	});
})();

</script>

【说明】player_css 配置中，filter: hue-rotate(90deg); 这一句，作用是转换色相，将播放器各元素的颜色都做了调整。

梦油

青山绿水、 重峦叠嶂、水秀山明、江山如画，太美了，太美了。

红影

用路径来模拟波浪，这设想真棒

红影

还弄了带倒影的闪光和飘飞的落叶，背景选择的风景真美

红影

哦，前面没看仔细，不是倒影呢，是下面那个加了透明度

马黑黑

红影 发表于 2023-10-6 12:02
哦，前面没看仔细，不是倒影呢，是下面那个加了透明度

模拟倒影的方法很多的

马黑黑

醉美水芙蓉 发表于 2023-10-6 11:46
欣赏老师新作品！太霸气了！

马黑黑

红影 发表于 2023-10-6 12:00
还弄了带倒影的闪光和飘飞的落叶，背景选择的风景真美

长江很美的

马黑黑

红影 发表于 2023-10-6 11:56
用路径来模拟波浪，这设想真棒

其实它大概是长江的主干走势图，不精准，大概弄一下

红影

马黑黑 发表于 2023-10-6 12:09
模拟倒影的方法很多的

是的，这种好方法，不挑播放器。

红影

马黑黑 发表于 2023-10-6 12:10
长江很美的

那是当然，它是炎黄子孙的母亲河啊。

红影

马黑黑 发表于 2023-10-6 12:10
其实它大概是长江的主干走势图，不精准，大概弄一下

不管怎么说，这个主题都适合曲线的，这个走势也挺像啊。

小文

欣赏

冬天的雨

画面真美，现在的新农村都是山青水秀了，美极了

冬天的雨

杨洪基的演唱也是高八度的，声音洪亮，有气势

冬天的雨

欣赏马老师的新分享

小辣椒

这个转换色相前面有看见分享了，但不知道怎么用，黑黑一步步深入分解了，小辣椒就等你做好直接套用了

千羽

风景好美啊，那个金光闪闪的小太阳和飘落的片叶都是大亮点，播放器和伴侣也是美美达