学习代码音画《让我们舞起来》
<style>
#papa { margin: 20px 0 20px calc(50% - 481px); width: 1000px; height: 600px; 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: 100%; height: 100%; object-fit: cover; }
.vid:nth-of-type(2) { mix-blend-mode: screen; }
.vid:nth-of-type(3) { width: 160px; height: 160px; right: 0; top: 0; border-radius: 50% 0 50% 50%; cursor: pointer; }
</style>
<div id="papa">
<audio id="aud" src="https://file.uhsea.com/2405/7b7ed7a64da8b63eaaed21e2290334f855.mp3" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/33/69/62f0d6e506540.mp4" poster="https://638183.freep.cn/638183/t23/1/qbui.jpg" disablePictureInPicture loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/18/65/5eef9970142b6.mp4" disablePictureInPicture loop muted></video>
<video class="vid" id="player" src="https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bd8878094.mp4" poster="https://638183.freep.cn/638183/small/f01.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: 20px; color: lightblue; --bg: linear-gra**nt(rgba(0,0,800,.2), rgba(0,0,800,.6))',
lrcAr: geci
});
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 = [ ['0.00', '让我们舞起来',9.50],
['10.00', '演唱：宋祖英',10.22],
['20.76', 'LRC：老谟深虑',2.36],
['23.24', '',1.13],
['24.43', '挥动彩云的翅膀',3.54],
['28.16', '让我们舞起来',3.99],
['32.36', '舞动心情把梦打开',3.62],
['36.17', '不要再等待',4.06],
['40.44', '擦亮星光的舞鞋',3.67],
['44.30', '让我们舞起来',4.10],
['48.62', '舞动青春花开不败',3.75],
['52.57', '天地是舞台',6.40],
['59.31', '阳光下我们舞起来',3.26],
['62.74', '随风儿摇摆自由自在',3.82],
['66.76', '阳光下我们舞起来',3.80],
['70.76', '欢乐开怀世界更精彩',4.11],
['75.09', '阳光下我们舞起来',3.67],
['78.95', '随风儿摇摆自由自在',3.89],
['83.05', '阳光下我们舞起来',3.81],
['87.06', '欢乐开怀世界更精彩',7.90],
['95.38', '',19.37],
['115.77', '挥动彩云的翅膀',3.63],
['119.59', '让我们舞起来',3.89],
['123.69', '舞动心情把梦打开',3.50],
['127.37', '不要再等待',4.32],
['131.92', '擦亮星光的舞鞋',3.76],
['135.88', '让我们舞起来',3.93],
['140.02', '舞动青春花开不败',3.71],
['143.92', '天地是舞台',6.16],
['150.40', '阳光下我们舞起来',3.51],
['154.10', '随风儿摇摆自由自在',3.91],
['158.22', '阳光下我们舞起来',3.84],
['162.26', '欢乐开怀世界更精彩',4.04],
['166.51', '阳光下我们舞起来',3.69],
['170.39', '随风儿摇摆自由自在',4.00],
['174.60', '阳光下我们舞起来',3.73],
['178.53', '欢乐开怀世界更精彩',8.03],
['186.98', '阳光下我们舞起来',3.57],
['190.74', '随风儿摇摆自由自在',3.89],
['194.83', '阳光下我们舞起来',3.87],
['198.90', '欢乐开怀世界更精彩',7.48],
['206.77', '欢乐开怀世界更精彩',14.45],
['221.98', '',4.5]];
</script>
老谟晚上好，这个代码套用做的很漂亮的{:5_150:} 这个背景视频效果漂亮的{:5_150:} 整体效果也是不错{:5_150:}{:5_150:} 小辣椒 发表于 2024-5-27 22:06
老谟晚上好，这个代码套用做的很漂亮的
谢谢老师鼓励，向你学习！
liumang 发表于 2024-5-27 23:18
整体效果也是不错
谢谢老师的受案和鼓励，下午好！
liumang 发表于 2024-5-27 23:18
整体效果也是不错
老师你好，请问“网盘外链”为什么外链的MP3，用了以后，当时好用，有音乐，可过一会就失效了。是我的级别不够，还是哪里的外链就是临时的。能有长久的吗，谢谢！
老谟深虑 发表于 2024-5-31 16:08
老师你好，请问“网盘外链”为什么外链的MP3，用了以后，当时好用，有音乐，可过一会就失效了 ...
你是用那个网盘？ 本帖最后由 老谟深虑 于 2024-6-1 16:48 编辑
liumang 发表于 2024-6-1 12:13
你是用那个网盘？
免费在线文件上传。请问老师那个最好用？
老谟深虑 发表于 2024-6-1 16:31
免费在线文件上传。请问老师那个最好用？
几个都很好用的，就是取链接方式不一样，你注册舍屋试一下，这个取链接方便
页:
[1]
2