本帖最后由 花简静 于 2024-9-10 19:51 编辑
<style>
#papa { margin: 130px 0 20px calc(50% - 931px) ;
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/20240707gu.webp') no-repeat center/cover;
box-shadow: 2px 2px 5px #333;
overflow: hidden;
z-index: 1;
position: relative;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
opacity: .59;
-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
pointer-events: none;
}
#hua {
position: absolute;
width: 20px;
height: 30px;
left: 49.5%;
bottom:185px;
cursor: pointer;
z-index:99;
animation: rot 8s linear infinite var(--state);
--state: running;
}
.leaf {
position: absolute;
left: -50%;
top: -50%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, yellow, OliveDrab);
border-radius: 80% 0%;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateX(20px);
}
.leaf:nth-of-type(1) { --deg: 0deg; }
.leaf:nth-of-type(2) { --deg: 72deg; }
.leaf:nth-of-type(3) { --deg: 144deg; }
.leaf:nth-of-type(4) { --deg: 216deg; }
.leaf:nth-of-type(5) { --deg: 288deg; }
@keyframes rot { to { transform: rotate(360deg); }
</style>
<div id="papa">
<img src="https://642303.freep.cn/642303/za/IMG_4409.GIF" width="600px" alt="" style="position: absolute; mix-blend-mode: multiply; filter: hue-rotate(120deg);bottom: 100px;right:900px; opacity: .45;" />
<video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/20/67/5f33b039ec172.mp4" muted autoplay loop></video>
<div id="hua">
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div>
<audio id="aud" src="https://www.kumeiwp.com/wj/212574/2024/04/21/4c53d289524f45ce41ba1e32828ff75f.mp3" autoplay loop></audio>
</div>
<script>
papa.onclick = () => {
aud.paused ? aud.play() : aud.pause();
hua.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/anklet_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#papa',
geci: geci,
skip: 0,
average: 0,
lizi: { color1: 'DarkSeaGreen', color2: ' Khaki' },
player_css: `
left: 50%; transform: translateX(-50%);
bottom: 120px;
color: Green;
opacity: .95;
--track: silver;
--prog: Green;
--bRad: 0% 100% 50%;
--btnBg: url('') center/cover
`,
lrc_css: 'left: 50%; transform: translateX(-50%); font: bold 2.2em cursive;top: 830px; --bg: linear-gradient(#fff, Olive); color: #ddd;',
fs_css: 'left: 20px; bottom: 20px; opacity: .15;--bg: transparent; --color: white;',
});
};
var geci = `
[00:01.54]单曲：三生三幸 (Live)
[00:01.929]歌手：海来阿木 / 陈冰
[00:03.01]所属专辑：天赐的声音第三季 第10期
[00:03.992]作词 : 海来阿木
[00:04.901]作曲 : 海来阿木
[00:05.660]编曲 : 小灰人
[00:06.657]制作人 : 彭程@金牛studio/汤佩弦@牛班NEWBAND
[00:07.652]原唱 : 海来阿木
[00:09.339]音乐总监 : 彭程@金牛studio
[00:10.499]音响总监 : 何飚
[00:11.579]学习黑师20240829《未成年》效果
[00:13.62]原生lrc歌词同步之脚链放器
[00:23.136]这辈子多幸运遇到你
[00:27.180]多想几遍也是感激你
[00:31.517]不顾劝说坚定选择和我在一起
[00:35.671]风餐露宿颠沛流离也不弃不离
[00:39.899]再后来看我功成名利
[00:44.47]你也曾抑郁自怜自艾
[00:48.196]可生活啊除了是你没什么足惜
[00:52.422]夜里回首患难岁月我泪流不已
[00:59.073]我希望最初是你 后来是你
[01:02.946]最终也是你 我不爱你谁爱你
[01:09.299]不能让你的亲朋 我的故人
[01:12.622]笑话是一场游戏
[01:17.085]我希望花开是你 叶落是你
[01:19.839]白首不相离 我不爱你谁爱你
[01:26.69]该是我三生有幸 遇见了你
[01:29.036]你是我此生最好的运气
[02:16.926]这辈子多幸运遇到你
[02:20.883]多想几遍也是感激你
[02:25.100]不顾劝说坚定选择和我在一起
[02:29.319]风餐露宿颠沛流离也不弃不离
[02:33.540]再后来看我功成名利
[02:37.686]你也曾抑郁自怜自艾
[02:41.861]可生活啊除了是你没什么足惜
[02:46.74]夜里回首患难岁月我泪流不已
[02:53.016]我希望最初是你 后来是你
[02:56.689]最终也是你 我不爱你谁爱你
[03:03.30]不能让你的亲朋 我的故人
[03:06.013]笑话是一场游戏
[03:10.900]我希望花开是你 叶落是你
[03:13.528]白首不相离 我不爱你谁爱你
[03:19.831]该是我三生有幸 遇见了你
[03:23.090]你是我此生最好 的运气
[03:31.454]我希望最初是你 后来是你
[03:34.010]最终也是你 我不爱你谁爱你
[03:40.869]不能让你的亲朋 我的故人
[03:44.146]笑话是一场游戏 一场游戏
[03:48.438]我希望 花开是你 叶落是你
[03:51.408]白首不相离 我不爱你谁爱你
[03:57.741]该是我三生有幸 遇见了你
[04:01.041]你是我此生
[04:02.040]最好 的运气
[04:07.303]乐队队长/吉他1：倪方来@牛班NEWBAND
[04:11.522]吉他2：倪伟恩@牛班NEWBAND
[04:14.196]键盘1：董音@牛班NEWBAND
[04:16.212]键盘2：练梦露@牛班NEWBAND
[04:18.672]贝斯：邱培荣@牛班NEWBAND
[04:20.477]鼓：范文君@牛班NEWBAND
[04:22.290]和音：张恋歌/费瀚林/张义欣/牟雪
[04:24.144]和音编写：张义欣
[04:25.826]PGM：章谋杰
[04:28.135]音乐混音：林梦洋
`;
</script>
| 
