论坛 › 音乐沙龙 › 《月老掉线》TO樵歌&清儿幽幽（学习黑黑《瞳》代码）

红影 发表于 2025-3-16 22:27

《月老掉线》TO樵歌&清儿幽幽（学习黑黑《瞳》代码）

<style>
        @import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
        #tz { --state: running; margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic1.imgdb.cn/item/67d68dae88c538a9b5bf35e9.jpg') no-repeat center/cover;overflow: hidden;border-radius:20px; }
        #vid { position: absolute; width: 100%; height: 100%;bottom: 0; mix-blend-mode: screen; mask: linear-gradient(to top right,red 90%, transparent 60%); -webkit-mask: linear-gradient(to top right,red 90%, transparent 60%); opacity: .35; }
        #vid:nth-of-type(2) { opacity: 0.55; left: 42%; width: 100%; height: 100%; clip-path: inset(15% 40% 15% 40% round 10%); mix-blend-mode: Luminosity; }
        #vid:nth-of-type(3) { opacity: 0.55; left: -42%; width: 100%; height: 100%; clip-path: inset(15% 40% 15% 40% round 10%);mix-blend-mode: Luminosity; }
        #player { position: absolute; width: 46%; height: 84%; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(0,0,128,.05); cursor: pointer; display: grid; place-items: center; }
        #mypic { width: 100%; height: 100%; opacity: .75; }
        @media screen and (max-width: 1025px) { #tz { transform: scale(.9); } }
        #prog { bottom: 4%; width: 24%; --bg1: silver; --bg2: #f589e0; --color: #f589e0; }
        #lrc { top: 30px; font: bold 36px/40px FZYaoti; color:Lavender;--bg: linear-gradient(180deg,hsla(300,100%,50%,.75),hsla(60,100%,50%,.65)); }
        #fsbtn { bottom: 5%; border: 2px solid #f589e0; color: Lavender; }
        @keyframes in1 {
                0% { width: 0; height: 0; transform: rotate(0); }
                60% { width: 100%; height: 100%; transform: rotate(-720deg) }
                90% { width: 100%; height: 100%; transform: rotate(-720deg); }
                100% { width: 0; height: 0; transform: rotate(0); }
        }
        @keyframes in2 {
                0% { width: 0; height: 0; transform: rotate(0); }
                60% { width: 100%; height: 100%; transform: rotate(720deg) }
                90% { width: 100%; height: 100%; transform: rotate(720deg); }
                100% { width: 0; height: 0; transform: rotate(0); }
        }
</style>

<div id="tz" class="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2166423654.mp3"></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2419216/00/01/98/5b544ba6b7b10_10s_big.mp4" autoplay loop muted></video>
        <video id="vid" src="https://img.tukuppt.com/video_show/2430062/00/12/69/5dcf2d74301b9_10s_big.mp4" autoplay loop muted></video>
        <video id="vid" src="https://img.tukuppt.com/video_show/2430062/00/12/69/5dcf2d74301b9_10s_big.mp4" autoplay loop muted></video>
        <div id="player"><img id="mypic" src="https://pic1.imgdb.cn/item/67d68d0188c538a9b5bf35c9.jpg" alt="" /></div>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="prog" class="prog" data-tt="00:00 00:00"></div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';

var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

var audio = new Aud(tz, player, lrcAr);
audio.play();
fscreen.fs(tz, fsbtn);

var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2'];

var picAr = [
        'https://pic1.imgdb.cn/item/67d68d0188c538a9b5bf35c9.jpg',
        'https://pic1.imgdb.cn/item/67d68e1688c538a9b5bf35ee.jpg',
        'https://pic1.imgdb.cn/item/67d68e3188c538a9b5bf35f1.jpg',
        'https://pic1.imgdb.cn/item/67d68e5188c538a9b5bf35fa.jpg',
];

var showPics = (pics) => {
        mypic.src = pics;
        mypic.style.animation = `${anis} ${gapTime}ms forwards var(--state)`;
        picIdx = (picIdx + 1) % pics.length;
};

setInterval( () => {
        if(!aud.paused) showPics(picAr);
}, gapTime);

showPics(picAr);
</script>

红影 发表于 2025-3-16 22:28

@樵歌@清儿幽幽一首DJ歌曲送给你们，祝福春日快乐{:4_187:}{:4_187:}

红影 发表于 2025-3-16 22:29

师兄知道这个礼物的含义，正好休息天有空，做个帖子玩。也把你们的时间均匀一下{:4_173:}

红影 发表于 2025-3-16 22:30

感谢黑黑的代码，发现这个图片轮播的效果还没做过呢，正好学习一下。谢谢@马黑黑 {:4_187:}

梦油 发表于 2025-3-17 07:27

影子朋友的礼物真时尚，我猜樵歌和青儿幽幽一定很喜欢。

樵歌 发表于 2025-3-17 08:18

从幽邃中旋出身来
把回忆定格得
很近很真
那些亲切的动词
像一幅幅写意的山水
弥古香醇

樵歌 发表于 2025-3-17 08:20

红影 发表于 2025-3-16 22:28
@樵歌@清儿幽幽一首DJ歌曲送给你们，祝福春日快乐

谢谢师妹春天送来的好礼！{:4_179:}我就先代她收下这深厚的情意了{:4_173:}

樵歌 发表于 2025-3-17 08:25

红影 发表于 2025-3-16 22:29
师兄知道这个礼物的含义，正好休息天有空，做个帖子玩。也把你们的时间均匀一下

知道知道，是我要求师妹这样的。你们忙，我这一阵儿也乱忙。她是26。她身体总也有些小恙，倒也像林妹妹那样是个多愁多病的身{:4_170:}

樵歌 发表于 2025-3-17 08:26

梦油 发表于 2025-3-17 07:27
影子朋友的礼物真时尚，我猜樵歌和青儿幽幽一定很喜欢。

老哥说对了，对！非常喜欢。图意颇有深意。

梦江南 发表于 2025-3-17 08:55

看呆了！这么动感又酷的音画，赞！

小九 发表于 2025-3-17 09:09

这个帖子，音乐和画面融合的很好，节奏感很强，樵歌，青儿幽幽收礼开心{:4_171:}

庶民 发表于 2025-3-17 09:30

都会这样的美滋滋制作。

红影 发表于 2025-3-17 13:40

梦油 发表于 2025-3-17 07:27
影子朋友的礼物真时尚，我猜樵歌和青儿幽幽一定很喜欢。

谢谢梦油，我也是套用的代码做的{:4_187:}

红影 发表于 2025-3-17 13:48

樵歌 发表于 2025-3-17 08:18
从幽邃中旋出身来
把回忆定格得
很近很真


谢谢师兄的认真点评{:4_187:}

红影 发表于 2025-3-17 13:49

樵歌 发表于 2025-3-17 08:20
谢谢师妹春天送来的好礼！我就先代她收下这深厚的情意了

美丽的春天，祝福你们快乐{:4_187:}

红影 发表于 2025-3-17 13:50

樵歌 发表于 2025-3-17 08:25
知道知道，是我要求师妹这样的。你们忙，我这一阵儿也乱忙。她是26。她身体总也有些小恙，倒也像林妹妹那 ...

清儿性子柔和，身体娇弱些也是正常呢{:4_204:}

红影 发表于 2025-3-17 13:51

梦江南 发表于 2025-3-17 08:55
看呆了！这么动感又酷的音画，赞！

就是套用的黑黑的《瞳》的代码啊，发现这个没做过，正好边学习边送礼了{:4_173:}

红影 发表于 2025-3-17 13:52

小九 发表于 2025-3-17 09:09
这个帖子，音乐和画面融合的很好，节奏感很强，樵歌，青儿幽幽收礼开心

很喜欢的节奏，感觉用来做这个效果挺不错，就做了{:4_173:}

红影 发表于 2025-3-17 13:53

庶民 发表于 2025-3-17 09:30
都会这样的美滋滋制作。

是代码做的，我在跟着学代码呢{:4_173:}

梦油 发表于 2025-3-17 17:01

樵歌 发表于 2025-3-17 08:26
老哥说对了，对！非常喜欢。图意颇有深意。

祝樵歌快乐！

查看完整版本: 《月老掉线》TO樵歌&清儿幽幽（学习黑黑《瞳》代码）