南无月 发表于 2024-5-29 21:21

【黑师代码】烟雨江南（学习黑师20240529《三星 望月》双视频多图片联控效果）





<style>
        #papa { margin: 130px 0 20px calc(50% - 831px); width: 1500px; height: 800px; background: lightblue; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
        .vid { position: absolute;width: 110%;height: 100%;right:-50px;object-fit: cover; pointer-events: none; z-index: 2;}
        .vid:nth-of-type(2) { height: 100%; height: calc(100% + 70px);top: -70px; mix-blend-mode: screen; opacity: .99; z-index: 3;}
        .star { position: absolute; left: 30px; bottom: 40px; cursor: pointer; animation: ani 1.5s linear infinite alternate var(--state); z-index: 6;mix-blend-mode: screen;opacity: .6;}
        .star:nth-of-type(2) { left: 180px; bottom: 160px; animation-delay: -.5s; mix-blend-mode: screen;opacity: .3;}
        .star:nth-of-type(3) { left: 600px; bottom: 10px; animation-delay: -1s; mix-blend-mode: screen;opacity: .1;}
        @keyframes ani { from { transform: rotate(-10deg) scale(.8); opacity: .2; } to { transform: rotate(10deg) scale(1.5);} }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1949389846.mp3" autoplay loop></audio>
        <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4" loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" loop muted></video>
        <img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
        <img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
        <img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
</div>

<script>
(function() {
        const vids = document.querySelectorAll('.vid'), stars = document.querySelectorAll('.star');
        aud.onplaying = aud.onpause = () => {
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                vids.forEach( vid => aud.paused ? vid.pause() : vid.play());
                stars.forEach(star => star.title = aud.paused ? '点击播放' : '点击暂停');
        };
        stars.forEach(star => star.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
        LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '.star',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
        });
};
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
        ];
</script>
<Br><Br><Br><Br><Br><Br><Br>

南无月 发表于 2024-5-29 21:21

@马黑黑 白老师来瞧瞧，今天这个双视频的比较快，刚跟了一个

马黑黑 发表于 2024-5-29 21:23

这个其实挺好做的，就是素材准备有点麻烦

南无月 发表于 2024-5-29 21:30

马黑黑 发表于 2024-5-29 21:23
这个其实挺好做的，就是素材准备有点麻烦

这个很简单，换视频，连你的星光都没换。。又加了个滤色，过滤成白的了。。

马黑黑 发表于 2024-5-29 21:33

南无月 发表于 2024-5-29 21:30
这个很简单，换视频，连你的星光都没换。。又加了个滤色，过滤成白的了。。

可以考虑加一个别样的按钮

南无月 发表于 2024-5-29 21:38

马黑黑 发表于 2024-5-29 21:33
可以考虑加一个别样的按钮

其实我库里翻了一下，没找到啊。。
它还要闪，这就不好整了。

马黑黑 发表于 2024-5-29 21:40

南无月 发表于 2024-5-29 21:38
其实我库里翻了一下，没找到啊。。
它还要闪，这就不好整了。

加别的，换class换id

南无月 发表于 2024-5-29 21:50

马黑黑 发表于 2024-5-29 21:40
加别的，换class换id

{:4_170:}
这个好，我还有一个作业没完成。。半拉的。。

马黑黑 发表于 2024-5-29 21:51

南无月 发表于 2024-5-29 21:50
这个好，我还有一个作业没完成。。半拉的。。

要能够自己整合别的东东进去，我指的不是代码，是元素

绿叶清舟 发表于 2024-5-29 21:55

怎么找到一样的视频啊

南无月 发表于 2024-5-29 22:00

绿叶清舟 发表于 2024-5-29 21:55
怎么找到一样的视频啊
跟哪里的一样了呀

南无月 发表于 2024-5-29 22:04

马黑黑 发表于 2024-5-29 21:51
要能够自己整合别的东东进去，我指的不是代码，是元素

我知道你在说什么，
这个为了回赠贴匆忙整的，
所以先这样简单点~
加别的元素今天先不行了。。
整好给你汇报。{:4_170:}

马黑黑 发表于 2024-5-29 22:10

南无月 发表于 2024-5-29 22:04
我知道你在说什么，
这个为了回赠贴匆忙整的，
所以先这样简单点~


{:4_196:}

红影 发表于 2024-5-30 09:13

这个好，月儿还加了歌词进去。好漂亮的美人儿啊{:4_199:}

梦江南 发表于 2024-5-30 11:53

老师真棒！{:4_199:}

南无月 发表于 2024-5-30 18:00

梦江南 发表于 2024-5-30 11:53
老师真棒！

感谢临帖支持。

南无月 发表于 2024-5-30 18:00

红影 发表于 2024-5-30 09:13
这个好，月儿还加了歌词进去。好漂亮的美人儿啊

这个歌词容易的。。纯套用贴。。{:4_170:}

南无月 发表于 2024-5-30 18:00

马黑黑 发表于 2024-5-29 22:10


哎，这笑得好丑啊。。{:4_170:}

马黑黑 发表于 2024-5-30 18:01

南无月 发表于 2024-5-30 18:00
哎，这笑得好丑啊。。

你笑起来真好看

南无月 发表于 2024-5-30 18:07

马黑黑 发表于 2024-5-30 18:01
你笑起来真好看

这跟我没关系。就图说图{:4_170:}
页: [1] 2
查看完整版本: 【黑师代码】烟雨江南（学习黑师20240529《三星 望月》双视频多图片联控效果）