论坛 › 音乐沙龙 › 夜晚的星空 TO：走过岁月 （学习套用黑黑私人侦探播放器效果）

小辣椒 发表于 2024-11-18 20:23

夜晚的星空 TO：走过岁月 （学习套用黑黑私人侦探播放器效果）

<style>
        #mydiv { margin: 140px 0 40px calc(50% - 726px); width: 1277px; height: 740px; background: url('https://xlaj.cn/upfile/202411/18/8.gif') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
        #msvg { position: absolute; left: calc(39% - 100px); top: 12%; cursor: pointer; filter: drop-shadow(-5px -5px 10px RoyalBlue); animation: rot 8s linear infinite var(--state); }
        #msvg:hover { filter: hue-rotate(60deg); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; opacity: 0.6;   }
        #fsbtn { position: absolute; bottom: 15px; color: white; padding: 2px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }

            #plane1{position: absolute;left: 12px;top: 0;width: 12px;offset-distance: 0;offset-path: path("M0 20 Q300 80, 700 350 T1220 700");animation: move 8s linear infinite;}       
#dt1{ position: absolute; width: 500px; height: 200px; top: 77%; left: 65%; }
#dt2{ position: absolute; width: 32px; height: 32px; top: 15%; left: 45%; }
#dt3{ position: absolute; width:32px; height: 32px; top: 30%; left: 40%; }
#dt4{ position: absolute; width: 32px; height: 32px; top: 11%; left: 27%; }

       @keyframes rot { to { transform: rotate(360deg); } }
      @keyframes move { to { offset-distance: 100%;} }

</style>

<div id="mydiv">
   <img id="dt1" src="https://xlaj.cn/upfile/202411/18/1.png" alt="" />
   <img id="dt2" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
   <img id="dt3" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
   <img id="dt4" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
   <img id="plane1" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg" alt="" />

        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/9ad5-audiofreehighqps/EE/84/GAqh3wsK5C4TACAAAAMfO8kU.m4a" autoplay loop></audio>
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/d038ac1007f2d25b46b8452f25a0d119_preview.mp" autoplay loop muted></video>
        <svg id="msvg" width="150" height="150"></svg>
        <span id="fsbtn"></span>
</div>

<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');

var tt = 9, r1 = 75, r2 = 70, deg = 360 / tt, rad = Math.PI / 180 * deg, pstr = 'M75 75';
var stop = `
        <stop offset="0" stop-color="#086a0f" />
        <stop offset="1" stop-color="SkyBlue" />
`;

for(var i = 0; i < tt; i ++) {
        var x = r1 + r2 * Math.cos(rad * i), y = r1 + r2 * Math.sin(rad * i);
        pstr += `A30 15 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A30 15 ${deg * i} 1 0 ${r1} ${r1}`;
}

dr.marker('m1', 10, 10, 5, 5);
dr.circle(5,5,5,'Blue').addTo('m1');
dr.gradient('radialGradient', {id: 'rg', r: .4}, stop);
dr.path(pstr, 'url(#rg)').set('fill-rule', 'evenodd').style('marker-mid: url(#m1)');

msvg.onclick = () => {
        aud.paused
                ? (aud.play(), vid.play(), msvg.style.setProperty('--state', 'running'))
                : (aud.pause(), vid.pause(), msvg.style.setProperty('--state', 'paused'));
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => mState());
</script>

小辣椒 发表于 2024-11-18 20:26

@走过岁月

岁月很想送上一个可以让你可以暖心的音乐，晓得你现在的心情绝对的沮丧，同样小辣椒也是一样的，但小辣椒一直相信岁月是一颗天空最耀眼的闪星，永远会发光，不会败落的。。。。{:4_179:}

帖里面为你加了一颗闪亮的流星{:4_173:}

小辣椒 发表于 2024-11-18 20:28

@马黑黑

黑黑 套用一个私人侦探播放器效果玩玩，感谢黑黑源码分享

小辣椒 发表于 2024-11-18 20:30

想不好上什么背景音乐，就上去一首 (恒大歌舞团)的舞曲---心中人，希望你会喜欢

马黑黑 发表于 2024-11-18 20:31

配色非常漂亮

小辣椒 发表于 2024-11-18 20:40

马黑黑 发表于 2024-11-18 20:31
配色非常漂亮

黑黑晚上好，这个背景是岁月以前的频谱制作，今天特意用一个岁月的AE制作，岁月以前的制作大部分链接失效了，太可惜了，小辣椒也是有责任的，前段时间我玩的少没有注意，岁月因为一直在忙，结果一下子流量超出很多，我发现后，已经过了15天时效，内容全部被删除了，真的欲哭无泪的

梦油 发表于 2024-11-18 21:17

流星陨落啦。

红影 发表于 2024-11-18 21:29

亲爱的把小播的配色调得好美啊，各种动态和频谱也漂亮，非常精美的制作。
欣赏亲爱的好帖{:4_199:}

红影 发表于 2024-11-18 21:30

还配了一颗闪亮的流星呢，真漂亮。
岁月收礼开心{:4_187:}

醉美水芙蓉 发表于 2024-11-18 21:50

醉美水芙蓉 发表于 2024-11-18 21:50

起个网名好难 发表于 2024-11-18 22:20

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

马黑黑 发表于 2024-11-18 22:29

小辣椒 发表于 2024-11-18 20:40
黑黑晚上好，这个背景是岁月以前的频谱制作，今天特意用一个岁月的AE制作，岁月以前的制作大部分链接失效 ...

非常遗憾

樵歌 发表于 2024-11-19 07:07

这么精美的帖子，岁月看到一定会喜欢的。{:4_174:}

樵歌 发表于 2024-11-19 07:08

小辣椒 发表于 2024-11-18 20:40
黑黑晚上好，这个背景是岁月以前的频谱制作，今天特意用一个岁月的AE制作，岁月以前的制作大部分链接失效 ...

没保存备份吗。我也经常 犯这错误。

梦江南 发表于 2024-11-19 08:32

好美的夜景，加上漂亮的小播，还有流星，醉了！{:4_187:}

秋思梦景 发表于 2024-11-19 09:06

问候老师好!精美代码音画佳作，精心制作分享。为您点赞！{:4_187:}{:5_116:}{:5_116:}

朵拉 发表于 2024-11-19 10:16

好酷炫的效果，岁月老师收礼开心{:4_190:}

查看完整版本: 夜晚的星空 TO：走过岁月 （学习套用黑黑私人侦探播放器效果）