柔情深种 ：走过岁月（学习黑黑月下舞者 效果）
<style>#papa { margin: 150px 0 20px calc(50% - 721px); width: 1280px; height: 700px; background: lightblue; box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
.vid { position: absolute;width: 130%; height: 130%; object-fit: cover; }
.vid:nth-of-type(2) {mix-blend-mode: screen; }
.vid:nth-of-type(3) { width: 160px; height: 160px; left: 100px; top:70px; border-radius: 50% 50% 50% 50%; cursor: pointer; }
#dt4{ position: absolute; width: 315px; height: 458px; top: 255px; left: 820px; z-index: 1000 }
#dt5{ position: absolute; width: 32px; height: 32px; top: 105px; left: 925px; z-index: 1000;}
</style>
<div id="papa">
<img id="dt4" src="https://xlaj.cn/assets/file/zp/20240516135701.png" alt="" />
<img id="dt5" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20240115210416.mp3" autoplay loop></audio>
<video class="vid" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/tkyr.mp4" poster="https://xlaj.cn/assets/file/zp/20240115210248.jpg" disablePictureInPicture loop muted></video>
<video class="vid" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/jgbw.mp4" disablePictureInPicture loop muted></video>
<video class="vid" id="player" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/liux.mp4" poster="https://xlaj.cn/assets/file/zp/20240516135740.png" title="播放/暂停" disablePictureInPicture loop muted></video>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'UTF-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/lrc_only.js';
document.body.appendChild(sF);
sF.onload = () => {
LRC({
papa: '#papa',
lrc_css: 'top: 40px; color: AliceBlue; --bg: linear-gradient(rgba(0,0,128,.2), rgba(0,0,255,.6))',
lrcAr: geci,
btn: '#player'
});
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
};
var mState = () => {
let vids = papa.querySelectorAll('video');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
papa.oncontextmenu = (e) => e.preventDefault();
var geci = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
@走过岁月
这个是重复送了，一样的歌曲不一样的效果，但一样的真心诚意{:4_170:} @马黑黑
黑黑套用一个练习一下，谢谢黑黑分享源码 三个视频都是岁月的，感谢岁月的精彩分享，不过你的就是我的{:4_170:} 沙发我坐的 小辣椒 发表于 2024-5-16 14:23
@走过岁月
这个是重复送了，一样的歌曲不一样的效果，但一样的真心诚意
明白，就主打一个真心 小辣椒 发表于 2024-5-16 14:27
三个视频都是岁月的，感谢岁月的精彩分享，不过你的就是我的
是左上两个和中间一个吗，我做多少个我都记不清了，全是你的，人也是你的 走过岁月 发表于 2024-5-16 14:28
沙发我坐的
沙发给你留了的 漂亮啊，效果棒棒的，小辣椒厉害了 开心收礼，谢谢小辣椒 走过岁月 发表于 2024-5-16 14:29
明白，就主打一个真心
三个视频直接做了背景效果，我也是许多时间没有玩了，昨天上来看见黑黑的教程分享，视频背景我省力多了，直接用岁月的了 一来就有礼收，开心兼高兴 {:4_179:} 走过岁月 发表于 2024-5-16 14:32
是左上两个和中间一个吗，我做多少个我都记不清了，全是你的，人也是你的
这么多年下来，我都做了你的起码有上百个了 走过岁月 发表于 2024-5-16 14:32
是左上两个和中间一个吗，我做多少个我都记不清了，全是你的，人也是你的
哈哈~~笑S了，人都是我的了{:4_172:} 小辣椒 发表于 2024-5-16 14:33
沙发给你留了的
坐了 走过岁月 发表于 2024-5-16 14:33
漂亮啊，效果棒棒的，小辣椒厉害了
里面有3个视频，播放器一个 背景闪动的一个 粒子飞舞一个 三个视频 走过岁月 发表于 2024-5-16 14:33
漂亮啊，效果棒棒的，小辣椒厉害了
小辣椒不厉害，是你的东西啊，你才厉害 小辣椒 发表于 2024-5-16 14:35
这么多年下来，我都做了你的起码有上百个了
我自己都记不清了 走过岁月 发表于 2024-5-16 14:33
开心收礼，谢谢小辣椒
不客气，谢什么啊，应该我谢你的，这么多年来，都是岁月的动感频谱和我喜欢的视频，制作了许多自己喜欢的东东了 走过岁月 发表于 2024-5-16 14:34
一来就有礼收，开心兼高兴
一起开心玩才是最重要的，没有你的东东，小辣椒玩起来就会感觉累了，现在都是你现成的
页:
[1]
2