花妖记

马黑黑 发表于 2024-8-22 07:46

马黑黑 发表于 2024-8-22 07:47

<h2>帖子代码：</h2>
<div class="hE"><pre>
<style>
#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background:
url('https://638183.freep.cn/638183/t24/webp2/hyao1.webp') no-repeat center/cover,
url('https://638183.freep.cn/638183/t24/webp2/hyao2.webp') no-repeat center/cover;
background-blend-mode: screen;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
position: relative;
}
#mama > video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
pointer-events: none;
}
</style>

<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=1894054702" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2402760/00/01/81/5b4aa6cff3caf.mp4" autoplay loop muted></video>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/huakuai_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
player_css: 'left: 50%; transform: translateX(-50%); bottom: 80px; --ww: 300px; --slider: orange; --track: lightblue; --prog: orange; --color: lightblue',
lrc_css: 'left: 50%; transform: translateX(-50%); bottom: 20px; --bg: linear-gradient( #eee, #eeeeee80); color: #666;',
fs_css: 'right: 20px; bottom: 20px; --bg: transparent; --color: #eee;',
});
};

var geci = `
花妖记
歌手：甘璐
花匠走出花房
花洒一篮花香
花牡丹加冕花篮花向晚
花田漫舞花瓣
花和尚杵花拐杖
隔花窗法术耍花样
花灯贴花脸谱
花心思读花语录
花腔唱花江湖
花泥开出花树
花枝坠满花露
花妖酥手移花接木
她摇身一变花小姐
衣袂随春风摇曳
花语绣鞋只待良人解
看花花蝴蝶翩翩飞
偏偏歇在柳叶眉
思无邪花也无缺
花灯贴花脸谱
花心思读花语录
花腔唱花江湖
花泥开出花树
花枝坠满花露
花妖酥手移花接木
她摇身一变花小姐
衣袂随春风摇曳
花语绣鞋只待良人解
看花花蝴蝶翩翩飞
偏偏歇在柳叶眉
思无邪花也无缺
花花蝴蝶翩翩飞
偏偏歇在柳叶眉
看花花蝴蝶翩翩飞
偏偏歇在柳叶眉
思无邪花也无
`;
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-8-22 07:48

本帖，测试原生lrc歌词同步插件之滑杆播放器，插件说明：原生lrc歌词同步之滑杆播放器 (52qingyin.cn)

马黑黑 发表于 2024-8-22 07:50

使用 var 声明歌词变量可以放在帖子JS代码的最后，var关键字声明的变量具备自提升功能，可先用后声明。

梦油发表于 2024-8-22 09:53

隐隐约约出现的动图很出彩啊。{:5_116:}

红影发表于 2024-8-22 09:55

入眼是奇妙的背景和奇特的视频，两者如此呼应，太美了{:4_199:}

红影发表于 2024-8-22 09:57

这女性花妖形象和那些花朵太适合了，不同的花朵幻化的妖也不同吧{:4_173:}

红影发表于 2024-8-22 09:58

这个帖子不但测试自制原生歌词，也带来了新的播放器效果的封装，一举两得，太赞了{:4_199:}

红影发表于 2024-8-22 10:00

滑杆播放器，最是适用大多数的帖子，这个太好了{:4_199:}

彩云归 发表于 2024-8-22 10:29

景、歌、词完美结合！谢谢分享！

马黑黑 发表于 2024-8-22 13:06

彩云归发表于 2024-8-22 10:29
景、歌、词完美结合！谢谢分享！

{:4_190:}

马黑黑 发表于 2024-8-22 13:06

红影发表于 2024-8-22 10:00
滑杆播放器，最是适用大多数的帖子，这个太好了

感谢支持

马黑黑 发表于 2024-8-22 13:06

梦油发表于 2024-8-22 09:53
隐隐约约出现的动图很出彩啊。

{:4_191:}

红影发表于 2024-8-22 14:52

马黑黑发表于 2024-8-22 13:06
感谢支持

黑黑总能找到合适的视频来给自己的帖子添彩，厉害{:4_187:}

梦油发表于 2024-8-22 16:29

马黑黑发表于 2024-8-22 13:06

我不懂代码，所以对你的讲授和作品真不敢妄加评论，只能是“站脚助威”。

马黑黑 发表于 2024-8-22 18:20

梦油发表于 2024-8-22 16:29
我不懂代码，所以对你的讲授和作品真不敢妄加评论，只能是“站脚助威”。

{:4_180:}

马黑黑 发表于 2024-8-22 18:21

红影发表于 2024-8-22 14:52
黑黑总能找到合适的视频来给自己的帖子添彩，厉害

视频都在那里的，只是需要事先明确用什么样的视频

小辣椒 发表于 2024-8-22 19:19

惊叹了。。。。黑黑居然视频可以找到如此和相配图意的效果{:4_178:}

小辣椒 发表于 2024-8-22 19:19

这些播放器都非常适合玩一图一歌的效果，感谢黑黑分享

马黑黑 发表于 2024-8-22 19:24

小辣椒发表于 2024-8-22 19:19
这些播放器都非常适合玩一图一歌的效果，感谢黑黑分享

你喜欢玩多歌

页: [1] 2

花潮论坛's Archiver

花妖记