论坛 › 音乐沙龙 › 《太空漫步》（学习黑黑《积木》效果）

红影 发表于 2024-5-17 11:06

《太空漫步》（学习黑黑《积木》效果）

<style>
        #papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 660px; background: tan; box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
        .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; }
        .vid:nth-of-type(2) { mix-blend-mode: screen; }
        .vid:nth-of-type(3) { width: 130px; height: 160px; right: 40px; top: 20px; box-shadow: 0 0 6px #FF00FF; border-radius: 50%; cursor: pointer; mix-blend-mode: screen; transform: skew(37deg); }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1958413749" autoplay loop></audio>
        <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1a8328831d31dfcbe0d642c209d2d072_preview.mp4 " poster="https://638183.freep.cn/638183/web/svg/3star.svg" disablePictureInPicture loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/35/5b418ce398ec3_10s_big.mp4" disablePictureInPicture loop muted></video>
        <video class="vid" id="player" src="https://img.tukuppt.com/video_show/2402760/00/01/85/5b4b45cd12441_10s_big.mp4" poster="https://638183.freep.cn/638183/web/svg/3star.svg" title="播放/暂停" disablePictureInPicture loop muted></video>
</div>

<script>
        var sF = document.createElement('script');
        sF.charset = 'UTF-8';
        sF.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
        document.body.appendChild(sF);
        sF.onload = () => LRC({papa: '#papa', lrc_css: 'top: 30px; color: rgba(235,248,255,.9); --bg: linear-gradient(rgba(122,193,255,.2), rgba(0,136,255,.6))', lrcAr: lrcAr, btn: '#player'});
        papa.oncontextmenu = (e) => e.preventDefault();
        var lrcAr = [
        ,
        ,
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
</script>

红影 发表于 2024-5-17 11:08

急急忙忙学习个，下午又要出去了。好在这个效果做起来特别方便。{:4_173:}

红影 发表于 2024-5-17 11:08

感谢@马黑黑 的代码，让我们可以借助代码上天入地，甚至跑去外太空{:4_173:}{:4_187:}

起个网名好难 发表于 2024-5-17 12:03

太空中走出这么潇洒的步伐{:5_117:}

顾-念 发表于 2024-5-17 13:47

这不是大风车么，没看出来漫步泥{:4_199:}

梦油 发表于 2024-5-17 14:33

本帖最后由 梦油 于 2024-5-17 14:34 编辑

太空太寂寞了，连个卖冰棍儿的都没有。

马黑黑 发表于 2024-5-17 17:53

红影 发表于 2024-5-17 11:08
感谢@马黑黑 的代码，让我们可以借助代码上天入地，甚至跑去外太空

这叫无所不能了{:4_170:}

红影 发表于 2024-5-17 20:15

起个网名好难 发表于 2024-5-17 12:03
太空中走出这么潇洒的步伐

正好找到这个视频，就做个玩玩{:4_173:}

红影 发表于 2024-5-17 20:16

顾-念 发表于 2024-5-17 13:47
这不是大风车么，没看出来漫步泥

哦，视频没出来的缘故吧，等一会就看到了啊。

红影 发表于 2024-5-17 20:16

梦油 发表于 2024-5-17 14:33
太空太寂寞了，连个卖冰棍儿的都没有。

主要没冰箱，带上去也全都化了{:4_173:}

红影 发表于 2024-5-17 20:17

马黑黑 发表于 2024-5-17 17:53
这叫无所不能了

是啊，乘着代码的翅膀，可以遨游宇宙{:4_173:}

南无月 发表于 2024-5-17 20:19

影子挑选的三个视频组合大气唯美，
更合近期嫦娥飞月的时事。。
壮观，震撼~~

南无月 发表于 2024-5-17 20:20

构思巧妙，有强烈的视觉冲击
影子的作品看着真是极度舒适，非常喜欢{:4_187:}

马黑黑 发表于 2024-5-17 21:09

红影 发表于 2024-5-17 20:17
是啊，乘着代码的翅膀，可以遨游宇宙

太好了

小辣椒 发表于 2024-5-17 22:08

亲爱的，效果特别的棒{:4_178:}

小辣椒 发表于 2024-5-17 22:10

中国人的太空行已经在进行中了，太伟大了，亲爱的好制作，赞！

红影 发表于 2024-5-18 10:58

南无月 发表于 2024-5-17 20:19
影子挑选的三个视频组合大气唯美，
更合近期嫦娥飞月的时事。。
壮观，震撼~~

看到黑黑带人物的视频，于是使劲去找了找，终于找到了{:4_173:}

红影 发表于 2024-5-18 11:00

南无月 发表于 2024-5-17 20:20
构思巧妙，有强烈的视觉冲击
影子的作品看着真是极度舒适，非常喜欢

谢谢月儿夸奖。那个烟雾视频有点淡，看不太出来，主要是也没怎么仔细去找{:4_173:}

红影 发表于 2024-5-18 11:01

马黑黑 发表于 2024-5-17 21:09
太好了

是黑黑带来的奇异翅膀，非常感谢黑黑呢{:4_187:}

红影 发表于 2024-5-18 11:01

小辣椒 发表于 2024-5-17 22:08
亲爱的，效果特别的棒

谢谢亲爱的，主要那视频比较好的缘故{:4_173:}

查看完整版本: 《太空漫步》（学习黑黑《积木》效果）