Moya Brennan : Show Me

马黑黑 发表于 2024-4-20 07:47

本帖最后由马黑黑于 2024-4-20 07:59 编辑 <style>
#papa { margin: -60px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #000 url('https://638183.freep.cn/638183/t24/1/moya.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); display: grid; place-items: center; overflow: hidden; user-select: none; z-index: 1; position: relative; }
#papa::before { position: absolute; content: ''; left: -100%; top: -100%; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/1/moya0.jpg') no-repeat center/cover; opacity: 0; transition: 5s; }
#papa:hover::before { left: 0; top: 0; opacity: 1; }
.play { position: absolute; left: 694px; top: 20px; width: 200px; animation: rot 6s linear infinite var(--state); z-index: 9; cursor: pointer; }
.play:nth-of-type(2) { left: 132px; filter: hue-rotate(120deg); }
#papa video { position: absolute; top: -200px; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
#papa video:nth-of-type(2) { top: 0; border-radius: 0 30%; opacity: .5; }
@Keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2040200174" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" loop muted></video>
<video src="https://img.tukuppt.com/video_show/2475824/00/01/68/5b48425912ddd.mp4" loop muted></video>
<imgclass="play" src="https://638183.freep.cn/638183/t24/leaf/5l.png" alt="" />
<imgclass="play" src="https://638183.freep.cn/638183/t24/leaf/5l.png" alt="" />
</div>

<script>
var loadJs = (file, callback) => {
let sc = document.createElement('script');
sc.src = file;
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => callback();
};

var js1 = 'https://638183.freep.cn/638183/web/api/lrc.js';
var js2 = 'https://638183.freep.cn/638183/web/js/ball-lz.js';

loadJs(js1, () => {
LRC({
papa: '#papa',
lrcAr: lrcAr,
btn: '.play',
lrc_css: 'bottom: 20px;',
});
});

loadJs(js2, () => {});

lz = {papa: '#papa', total: 40, maxsize: 20, speed: 1, move: true};

let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];

papa.onclick = () => lz.move = !aud.paused;
</script>

马黑黑 发表于 2024-4-20 07:50

愤怒的葡萄 发表于 2024-4-20 07:51

非常漂亮的音画作品。

马黑黑 发表于 2024-4-20 07:55

愤怒的葡萄发表于 2024-4-20 07:51
非常漂亮的音画作品。

早

马黑黑 发表于 2024-4-20 07:55

歌词大意：

看看人群、时间、陌生人
我的眼里有些灰尘
看着盲人不会跌倒
不要再对我说谎
给我指路我从那里来
请给我指路去找到你
给我指路去听你的歌声
触摸我的手，时间、陌生人
地平线上的薄雾有多远
触摸墓碑，不会崩溃
再告诉我一次
给我指路我从那里来
请给我指路去找到你
给我指路去听你的歌声

愤怒的葡萄 发表于 2024-4-20 07:58

马黑黑发表于 2024-4-20 07:55
早

马版起得好早啊，不过我今天也是四点多就醒来的，五点开始看了两个多小时的电影。

马黑黑 发表于 2024-4-20 07:59

愤怒的葡萄发表于 2024-4-20 07:58
马版起得好早啊，不过我今天也是四点多就醒来的，五点开始看了两个多小时的电影。

厉害啊

愤怒的葡萄 发表于 2024-4-20 08:04

马黑黑发表于 2024-4-20 07:59
厉害啊

我看了贾玲主演的贺岁片《热辣滚烫》，感觉也拍得挺一般的。

今天醒得太早了，就起来看《热辣滚烫》了。

愤怒的葡萄 发表于 2024-4-20 08:04

马黑黑发表于 2024-4-20 07:59
厉害啊

葡萄在现实生活中只是一个普普通通的人，不是一个很优秀的人。

愤怒的葡萄 发表于 2024-4-20 08:26

马版也起来挺早的，周六八点不到就起来灌水了。

马黑黑 发表于 2024-4-20 08:29

愤怒的葡萄发表于 2024-4-20 08:26
马版也起来挺早的，周六八点不到就起来灌水了。

最近身体有点问题，要按时起来服药，过一下再去补觉

马黑黑 发表于 2024-4-20 08:29

愤怒的葡萄发表于 2024-4-20 08:04
葡萄在现实生活中只是一个普普通通的人，不是一个很优秀的人。

优秀体现在普普通通的细节中

马黑黑 发表于 2024-4-20 08:31

愤怒的葡萄发表于 2024-4-20 08:04
我看了贾玲主演的贺岁片《热辣滚烫》，感觉也拍得挺一般的。

今天醒得太早了，就起来看《热辣滚烫》了 ...

我好久没有看这类东西了。我喜欢用大屏幕看，有手机投屏神奇，现在闲置着。等身体好起来，也要看几部fox的片子

红影发表于 2024-4-20 08:34

这个厉害了，效果都是双份的呢。背景双份、按钮双份、视频也是双份。{:4_199:}
用nth-of-type() 增加的份数，意味着可以加无数个，只要愿意加{:4_173:}

愤怒的葡萄 发表于 2024-4-20 08:35

马黑黑发表于 2024-4-20 08:31
我好久没有看这类东西了。我喜欢用大屏幕看，有手机投屏神奇，现在闲置着。等身体好起来，也要看几部fox ...

马版，不跟你聊了，葡萄出去锻炼身体了，咱们等一下再聊吧，葡萄出去散步了。

红影发表于 2024-4-20 08:45

两个按钮放在两边特定位置，还变化了色相，真漂亮。两个视频的处理方式也不相同。
这个帖子的代码非常便于自己去发挥{:4_187:}

红影发表于 2024-4-20 08:46

恩雅的大姐的歌声也这么好听，而且多才多艺。他们一家子都很有音乐细胞啊{:4_199:}

马黑黑 发表于 2024-4-20 09:52

红影发表于 2024-4-20 08:34
这个厉害了，效果都是双份的呢。背景双份、按钮双份、视频也是双份。
用nth-of-type() 增加的份 ...

nth-of-type() 不是增加份数，是设置对应对象的样式

马黑黑 发表于 2024-4-20 09:57

红影发表于 2024-4-20 08:46
恩雅的大姐的歌声也这么好听，而且多才多艺。他们一家子都很有音乐细胞啊

艺术世家。恩雅的兄弟姐妹共9人，4男5女，几乎都在艺术方面有造诣。

红影发表于 2024-4-20 10:49

马黑黑发表于 2024-4-20 09:52
nth-of-type() 不是增加份数，是设置对应对象的样式

我是说可以加很多了啊{:4_173:}

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

Moya Brennan : Show Me