论坛 › 音乐沙龙 › Traveller（学习黑黑《Moola Mantra》帖子效果）

红影 发表于 2024-7-27 15:04

Traveller（学习黑黑《Moola Mantra》帖子效果）

<style>
#mydiv {
        margin: 120px 0 30px calc(50% - 681px);
        width: 1200px;
        height: 675px;
        overflow: hidden;
        background: url('https://pic.imgdb.cn/item/66a4688ad9c307b7e9450a65.jpg') no-repeat center/cover;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        position: relative;
}
#player {
        position: absolute;
        right: 200px;
        bottom: 90px;
        transform: skew(10deg);
        -webkit-mask: url('https://pic.imgdb.cn/item/66a45f93d9c307b7e93dc638.gif') no-repeat center/100% 100%;
        cursor: pointer;
}
#player1 {
        position: absolute;
        left: 100px;
        bottom: 180px;
        width: 560px;
        height: 200px;
        --tt: 6s;
}
#pic {
        position: absolute;
        left: 448px;
        top: 18px;
        width: 300px;
        opacity: .8;
        transform: rotate(15deg);
        animation: flash 1s infinite alternate var(--state);
}
#vid {
        position: absolute;
        top: -65px;
        right: -100px;
        width: 50%;
        height: 70%;
        object-fit: cover;
        -webkit-mask: linear-gradient(225deg, red 30%, transparent 75%, transparent);
}
li-zi {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        box-shadow: inset 0 0 5px Coral;
}
@keyframes moving {
        from { transform: translateY(0); opacity: 1; }
        to { transform: translateY(-260px); opacity: 0; }
}
@keyframes flash { to { transform: rotate(-15deg); opacity: .1; } }
</style>
<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=19277598" autoplay loop></audio>
        <img id="player" alt="" title="播放/暂停" src="https://pic.imgdb.cn/item/66a4684ed9c307b7e944dedc.jpg" />
        <div id="player1"class="loading"></div>
        <video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/01/70/5b4c44150d2a5_10s_big.mp4" autoplay loop muted></video>
        <img id="pic"src="https://pic.imgdb.cn/item/66a49299d9c307b7e9683ee6.png" />
</div>
<script>
var mState = () => {
        mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
        player.style.WebkitMask = `url(${aud.paused ? 'https://pic.imgdb.cn/item/66a460dcd9c307b7e93ebb5b.png' : 'https://pic.imgdb.cn/item/66a45f93d9c307b7e93dc638.gif'}) no-repeat center/100% 100%`;
        aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var all = 200;
for(var i = 0; i < all; i++) {
        var lz = document.createElement('li-zi');
        lz.style.cssText += `
                left: ${ 60 + Math.floor(Math.random() * 500)}px;
                top: ${ 60 + Math.floor(Math.random() * 60)}px;
                background: #${Math.random().toString(16).substring(2,8)};
                animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 4}s cubic-bezier(0.01, 0.12, 0.6, 1.04) infinite var(--state);
        `;
        player1.prepend(lz);
}
</script>

红影 发表于 2024-7-27 15:08

用了黑黑《Moola Mantra》里的小点点，还弄了《1001》里的mask效果，用在宇航员身上了，还用了黑黑《出埃及记》里的视屏效果，此外还有《墨家禅机》里的星星效果。
没时间做帖，把最近帖子里效果都套用一下，一锅烩都一起学习了。感谢黑黑的代码@马黑黑 {:4_187:}

红影 发表于 2024-7-27 15:10

点击宇航员可暂停。本来想截个方形的图图，后来还是发现这样长条形的和背景拟合更好。
把宇航员的图图倾斜了一下，感觉更像在下飞船的样子{:4_173:}

红影 发表于 2024-7-27 15:12

视频只取了右上角一块，感觉那里比较空，同时主要学习一下mask作用于视频的融合效果。
小点点下面的播放器没去用，就让mask作用于宇航员作为播放器了。{:4_204:}

红影 发表于 2024-7-27 15:15

去黑黑Moola Mantra那个所属专辑里去找的乐曲。看到Traveller旅行者，倒也挺适合太空旅行的{:4_173:}

起个网名好难 发表于 2024-7-27 15:58

玄幻的样子， 赞！

红影 发表于 2024-7-27 16:07

起个网名好难 发表于 2024-7-27 15:58
玄幻的样子， 赞！

主要学习一下那几个代码呢，谢谢难难鼓励{:4_187:}

竹溪 发表于 2024-7-27 16:09

漂亮，欣赏老师好帖{:4_204:}

梦油 发表于 2024-7-27 17:09

这个设计很有特色啊！

马黑黑 发表于 2024-7-27 18:08

红影 发表于 2024-7-27 15:15
去黑黑Moola Mantra那个所属专辑里去找的乐曲。看到Traveller旅行者，倒也挺适合太空旅行的

的确如此

红影 发表于 2024-7-27 21:15

竹溪 发表于 2024-7-27 16:09
漂亮，欣赏老师好帖

谢谢竹溪鼓励{:4_187:}

红影 发表于 2024-7-27 21:16

梦油 发表于 2024-7-27 17:09
这个设计很有特色啊！

谢谢梦油，我跟着学代码呢{:4_173:}

红影 发表于 2024-7-27 21:18

马黑黑 发表于 2024-7-27 18:08
的确如此

今天黑黑又设计了两边出粒子的代码呢，也很漂亮{:4_187:}

马黑黑 发表于 2024-7-27 21:27

红影 发表于 2024-7-27 21:18
今天黑黑又设计了两边出粒子的代码呢，也很漂亮

还行

红影 发表于 2024-7-27 21:56

马黑黑 发表于 2024-7-27 21:27
还行

发散的粒子和中间点状的边线还挺配的呢{:4_187:}

海笑 发表于 2024-7-28 08:19

欣赏老师佳作！

红影 发表于 2024-7-28 11:13

海笑 发表于 2024-7-28 08:19
欣赏老师佳作！

问好海笑，感谢鼓励{:4_187:}

小辣椒 发表于 2024-7-28 13:03

亲爱的，制作的效果加一起了，我都看不出是那个源码里面的{:4_198:}

小辣椒 发表于 2024-7-28 13:04

纯欣赏了，亲爱的好厉害哦{:4_177:}

梦油 发表于 2024-7-28 16:55

红影 发表于 2024-7-27 21:16
谢谢梦油，我跟着学代码呢

学得很好。

查看完整版本: Traveller（学习黑黑《Moola Mantra》帖子效果）