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

马黑黑

马黑黑

帖子代码

<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);
const rd_play = (ar,audio) => audio.src = ar[Math.floor(Math.random() * ar.length)];
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>

海笑

欣赏老师佳作！

马黑黑

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

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

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

audio控件在JS中添加。

愤怒的葡萄

好像听不了音乐啊？

马黑黑

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

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

马黑黑

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

音乐能否听到

愤怒的葡萄

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

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

马黑黑

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

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

梦江南

我能听到音乐。

海笑

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

能听到。

梦江南

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

起个网名好难

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

竹溪

金碧辉煌的宫殿

南无月

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

帖 ...

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

南无月

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

南无月

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

南无月

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

马黑黑

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

马黑黑

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

这也看得出来了，厉害