《新生的枝桠》TO花飞飞（学习黑黑《蓮花空行》代码）
<style>@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#papa { position: absolute; left: 50%; transform: translateX(-50%); width: clamp(800px, 95vw, 1400px); height: clamp(450px, 95vh, 760px); background: #eee url('https://file.uhsea.com/2504/89fef967a6e2f017bffd913a3ede93f3AQ.jpg') no-repeat center/cover; }
#mplayer { bottom: 20px; --track:#a8e160;--prog: #08ba0d; }
#lrcDiv { top: 10%; color: #e3fdd8; --hlcolor: #a6eb0a; }
#fsbtn { bottom: 20px; right: 30px;color: #83c92c; border: 2px solid #83c92c; }
.zw { height: clamp(450px, 90vh, 760px); margin: 30px; }
#vid { position: absolute; width: 100%; height: 110%;bottom: 0; mix-blend-mode: screen; object-fit: cover; mask: linear-gradient(to top right,red 90%, transparent ); -webkit-mask: linear-gradient(to top right,red 90%, transparent ); opacity: .95; pointer-events: none; }
.vid {
position: absolute;
width: 100%;
height: 120%;
opacity: .7;
object-fit: cover;
mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
pointer-events: none; bottom: 0;
}
</style>
<div id="papa" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2657797313" autoplay loop></audio>
<video class="vid" src="https://video.699pic.com/videos/75/07/10/a_1wwflj0et1aysuh616757507108393_10s.mp4" autoplay loop muted></video>
</div>
<div class="zw"></div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
var geci = ` 《新生的枝桠》\n 歌手：梨笑笑\n 帖赠花飞飞，感谢好礼\n 学习黑黑《蓮花空行》代码\n 感谢黑黑的代码\n吹进胡同的风\n陪着回家的孩童\n落日橘红 炊烟袅袅的升\n妈妈露着笑容\n\n吹向远方的风\n推着长大的孩童\n穿过人潮汹涌\n心里有一场冬\n学会了沉默无声\n\n像鸟儿离开村庄 飞进一座城\n找不到城堡 始终都很普通\n用离别换来的谋生\n也同样带着 离别的痛\n\n最初的勇\n怎么变成无力了\n想要的梦\n怎么败给出生了\n我还想 有天能够 到达\n\n可我害怕 我一直飞啊\n却只有 落脚的枝桠\n生活的风 一吹就断了\n断了 断了 去哪\n\n我找不到 那安稳的家\n也无法 回故乡的家\n我会一直 这样流浪吗\n应该还有希望吧\n\n像鸟儿离开村庄 飞进一座城\n找不到城堡 始终都很普通\n用离别换来的谋生\n也同样带着 离别的痛\n\n最初的勇\n怎么变成无力了\n想要的梦\n怎么败给出生了\n我还想 有天能够 到达\n\n可我害怕 我一直飞啊\n却只有 落脚的枝桠\n生活的风 一吹就断了\n断了 断了 去哪\n\n我找不到 那安稳的家\n也无法 回故乡的家\n我会一直 这样流浪吗\n应该还有希望吧\n\n可我害怕 我一直飞啊\n却只有 落脚的枝桠\n生活的风 一吹就断了\n断了 断了 去哪\n\n我找不到 那安稳的家\n也无法 回故乡的家\n我会一直 这样流浪吗\n应该还有希望吧`;
hcplay(papa,geci,3);
</script> @花飞飞 谢谢飞飞的好礼，也赶紧跟着学习一个做回礼{:4_187:}
其实是昨晚做的，做完看看太晚了就没发。
看到大家都是用的大图做的自适应，我特地选了个小图，这图图只有800*450，也一样能变大呢{:4_173:} 感谢黑黑的代码，这个做起来真方便，不用管图图的大小都能适应呢，真太好了@马黑黑 {:4_187:} 悠然的绿色，清新的心情。赞！{:5_116:} 眼底尽收绿色世界，看得人心情特别的沉静而舒适，生不出一丝杂念！ 绿色的背景图图，看着挺舒服的。{:4_187:} 这800x450发上来就变成这么大了，如果再大点，就不对了。 绿茵茵，春意盎然，生机勃勃！
谢谢影子精彩分享
祝花飞飞收礼愉快 红影 发表于 2025-4-7 13:26
感谢黑黑的代码，这个做起来真方便，不用管图图的大小都能适应呢，真太好了@马黑黑
图片太小的话品质得好一些，不然放大后不够清晰 梦油 发表于 2025-4-7 14:10
悠然的绿色，清新的心情。赞！
正好找到这个图图，还有这样的歌曲，就用来做帖子了{:4_173:}
谢谢梦油鼓励{:4_187:} 樵歌 发表于 2025-4-7 15:41
眼底尽收绿色世界，看得人心情特别的沉静而舒适，生不出一丝杂念！
这样的场景适合修炼{:4_173:} 梦江南 发表于 2025-4-7 16:17
绿色的背景图图，看着挺舒服的。
是养眼的颜色呢{:4_173:} 梦江南 发表于 2025-4-7 16:19
这800x450发上来就变成这么大了，如果再大点，就不对了。
这个是自适应，如果是很大的图图，也同样自动会变成这样大小呢。所以这个代码特别方便{:4_187:} 杨帆 发表于 2025-4-7 17:00
绿茵茵，春意盎然，生机勃勃！
谢谢影子精彩分享
祝花飞飞收礼愉快
谢谢杨帆，你的鼓励让人心中愉悦{:4_187:} 马黑黑 发表于 2025-4-7 18:32
图片太小的话品质得好一些，不然放大后不够清晰
是的，所以大图自适应没什么好担心的，小图自适应变大，就要考虑品质问题了。
我是特地选个小的，想试验一下的呢。事实证明效果很好呢{:4_187:} 红影 发表于 2025-4-7 19:19
是的，所以大图自适应没什么好担心的，小图自适应变大，就要考虑品质问题了。
我是特地选个小的，想试验 ...
图片除了宽高尺寸，像素内容的丰富性也是很重要的。有些图片，尺寸很小，但是，体积较大，原因就是图片每一个像素都是高品质的 啊~~~亲爱的制作漂亮的，界面整体的色彩调的太美了{:4_178:} 哇塞，也是送飞飞，祝飞飞送礼开心@花飞飞 马黑黑 发表于 2025-4-7 19:37
图片除了宽高尺寸，像素内容的丰富性也是很重要的。有些图片，尺寸很小，但是，体积较大，原因就是图片每 ...
是的，一般比较大文件的小图，像素通常都高呢。黑黑说得很有道理{:4_187:}