论坛 › 音乐沙龙 › 克罗地亚狂想曲（6首随机连播）

马黑黑 发表于 2024-7-24 07:24

克罗地亚狂想曲（6首随机连播）

本帖最后由 马黑黑 于 2024-7-24 16:46 编辑 <br /><br /><style>
#mydiv {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://638183.freep.cn/638183/t24/webp/kldy.webp') no-repeat center/cover;
        pointer-events: none;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        z-index: 1;
        position: relative;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        top: 50px;
        width: 120px;
        height: 120px;
        background: repeating-conic-gradient(orange 2%, yellow 4%, orange 6%);
        box-shadow: inset 0 0 10px red;
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        animation: rot 4s linear infinite var(--state);
}
#mydiv::before { left: 50px; filter: invert(.2); }
#mydiv::after { right: 50px; top: 100px; filter: invert(.3); }
#vid {
        position: absolute;
        width: 100%;
        height: 200px;
        object-fit: cover;
        -webkit-mask: radial-gradient(rgba(0,0,0,.6), rgba(0,0,0,.25), transparent);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv" title="播放/暂停">
        <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/71/5b48b547041bd.mp4" autoplay loop muted></video>
</div>

<script>
var songs = ['1920932653','1412187718','569144091','1377428317','1930426297', '407042026'].map(s => 'https://music.163.com/song/media/outer/url?id=' + s);
var rd_play = (ar,audio) => audio.src = ar;
var aud = document.createElement('audio');
aud.oncanplay = aud.onplaying = aud.onpause = () => {
        mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
}
aud.onended = () => rd_play(songs,aud);
aud.autoplay = true;
mydiv.appendChild(aud);
rd_play(songs, aud);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-7-24 07:24

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#mydiv {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://638183.freep.cn/638183/t24/webp/kldy.webp') no-repeat center/cover;
        pointer-events: none;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        z-index: 1;
        position: relative;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        top: 50px;
        width: 120px;
        height: 120px;
        background: repeating-conic-gradient(orange 2%, yellow 4%, orange 6%);
        box-shadow: inset 0 0 10px red;
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        animation: rot 4s linear infinite var(--state);
}
#mydiv::before { left: 50px; filter: invert(.2); }
#mydiv::after { right: 50px; top: 100px; filter: invert(.3); }
#vid {
        position: absolute;
        width: 100%;
        height: 200px;
        object-fit: cover;
        -webkit-mask: radial-gradient(rgba(0,0,0,.6), rgba(0,0,0,.25), transparent);
}
@keyframes rot { to { transform: rotate(1turn); } }
&lt;/style&gt;

&lt;div id="mydiv" title="播放/暂停"&gt;
        &lt;video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/71/5b48b547041bd.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
var songs = ['1920932653','1412187718','569144091','1377428317','1930426297', '407042026'].map(s =&gt; 'https://music.163.com/song/media/outer/url?id=' + s);
const rd_play = (ar,audio) =&gt; audio.src = ar;
var aud = document.createElement('audio');
aud.oncanplay = aud.onplaying = aud.onpause = () =&gt; {
        mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
}
aud.onended = () =&gt; rd_play(songs,aud);
aud.autoplay = true;
mydiv.appendChild(aud);
rd_play(songs, aud);
mydiv.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

海笑 发表于 2024-7-24 07:27

欣赏老师佳作！

马黑黑 发表于 2024-7-24 07:32

本帖最后由 马黑黑 于 2024-7-24 07:35 编辑

音乐分享，重在音乐。本帖，6首不同风格的克罗地亚狂想曲随机连播，听着听着让人半个时辰不知肉味。

帖子小播使用帖子主元素的两个伪元素做成，使用重复性角向渐变（也叫锥形渐变）做背景图案，简简单单的代码（18行）。

视频 100% * 200px 的呈现规格，默认处于帖子顶部，用径向渐变（也叫放射性渐变）遮罩，使之融入主帖背景（代码在32行）。

audio控件在JS中添加。

愤怒的葡萄 发表于 2024-7-24 07:35

好像听不了音乐啊？

马黑黑 发表于 2024-7-24 07:36

愤怒的葡萄 发表于 2024-7-24 07:35
好像听不了音乐啊？

我这里用了两个浏览器测试没问题

马黑黑 发表于 2024-7-24 07:36

海笑 发表于 2024-7-24 07:27
欣赏老师佳作！

音乐能否听到

愤怒的葡萄 发表于 2024-7-24 07:45

马黑黑 发表于 2024-7-24 07:36
我这里用了两个浏览器测试没问题

我使用的是火狐浏览器，等一会我使用360浏览器试试看。

马黑黑 发表于 2024-7-24 08:17

愤怒的葡萄 发表于 2024-7-24 07:45
我使用的是火狐浏览器，等一会我使用360浏览器试试看。

火狐没问题的。你的浏览器只是禁止了自动播放吧，点一下小播就可以了

梦江南 发表于 2024-7-24 08:30

我能听到音乐。

海笑 发表于 2024-7-24 08:30

马黑黑 发表于 2024-7-24 07:36
音乐能否听到

能听到。

梦江南 发表于 2024-7-24 08:35

看金碧辉煌的克罗地亚，听美妙的音乐，享受！

起个网名好难 发表于 2024-7-24 08:54

画面设计很巧妙；
invert .2 和 .3 差别不大， .2 / .8 明显些；
评分后动态失效， const 的原因？

竹溪 发表于 2024-7-24 09:40

金碧辉煌的宫殿{:4_187:}

南无月 发表于 2024-7-24 10:15

马黑黑 发表于 2024-7-24 07:32
音乐分享，重在音乐。本帖，6首不同风格的克罗地亚狂想曲随机连播，听着听着让人半个时辰不知肉味。

帖 ...

重复性角向渐变（也叫锥形渐变）原来这个不叫放射渐变。。我一直叫它放射渐变的
径向渐变（也叫放射性渐变） 原来这个才叫放射渐变。。我一直觉得放射渐变和径向渐变是两回事的。
我一直都叫错名字了是吧。。{:4_170:}

南无月 发表于 2024-7-24 10:17

简简单单的代码（18行）。repeating-conic-gradient(orange 2%, yellow 4%, orange 6%);
这个果然简单。。加个重复就好了。。
我昨天硬画的，整一堆代码也太不灵活了。{:4_170:}

南无月 发表于 2024-7-24 10:19

radial-gradient(rgba(0,0,0,.6), rgba(0,0,0,.25), transparent);
视频给了个径向渐变遮罩：最中间色彩透明度60，这部分视频显示比较明显；接下来色彩透明度只有25，视频没那么明显;最边缘是完全透明的，视频逐渐消失，实现无硬边。。
这样的设置融合十分自然

南无月 发表于 2024-7-24 10:19

音乐六曲连播，跟之前的专辑似的，可以把喜欢的音乐并在一贴了，很实用。。

马黑黑 发表于 2024-7-24 11:56

南无月 发表于 2024-7-24 10:19
音乐六曲连播，跟之前的专辑似的，可以把喜欢的音乐并在一贴了，很实用。。

{:4_190:}

马黑黑 发表于 2024-7-24 11:57

南无月 发表于 2024-7-24 10:19
radial-gradient(rgba(0,0,0,.6), rgba(0,0,0,.25), transparent);
视频给了个径向渐变遮罩：最中间色彩透 ...

这也看得出来了，厉害

查看完整版本: 克罗地亚狂想曲（6首随机连播）