Moola Mantra

马黑黑

马黑黑

帖子代码

<style>
#papa {
	margin: 30px 0 30px calc(50% - 593px);
	width: 1024px;
	height: 600px;
	background: url('https://638183.freep.cn/638183/t24/2/moma.jpg') no-repeat center/cover;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	z-index: 1;
	position: relative;
}
#player {
	position: absolute;
	bottom: -60px;
	left: calc(50% - 265px);
	width: 300px;
	height: 300px;
	border: 6px solid orange;
	border-radius: 50%;
	cursor: pointer;
	transform: rotateX(60deg);
	--tt: 6s;
}
#player::before, #player::after {
	position: absolute;
	content: '';
	border: inherit;
	border-radius: inherit;
	animation: rot var(--tt) linear infinite var(--state);
}
#player::before {
	inset: 20px;
	border-color: transparent gold;
}
#player::after {
	inset: 40px;
	border-width: 12px;
	border-style: dashed;
	--tt: 4s;
}
li-zi {
	position: absolute;
	width: 10px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 10px red;
}
@keyframes moving {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(-800px); opacity: 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
	<!-- Moola Mantra -->
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=19277603" autoplay loop></audio>
	<div id="player" title="播放/暂停" class="loading"></div>
</div>

<script>
var all = 100;
for(var i = 0; i < all; i++) {
	var lz = document.createElement('li-zi');
	lz.style.cssText += `
		left: ${ 60 + Math.floor(Math.random() * 160)}px;
		top: ${ 60 + Math.floor(Math.random() * 160)}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);
	`;
	player.prepend(lz);
}
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑

本帖：

（一）播放器利用 主元素+两个伪元素 的边框样式构建，再加入粒子若干。播放器沿X轴转60度与水面平行，故而其内的粒子尺寸宽高需要做调整以保持圆形形态。

（二）粒子的内阴影设置（代码46行）服务于帖子背景整体，粒子个体的颜色因之而受影响，不论本来面目是何种颜色，都会因内阴影向红色系趋同。

愤怒的葡萄

背景音乐挺好听的。

梦江南

欣赏学习老师的佳作！

南无月

马黑黑 发表于 2024-7-25 08:01
本帖：

（一）播放器利用 主元素+两个伪元素 的边框样式构建，再加入粒子若干。播放器沿X轴转60度与水面 ...

原来如此，刚还觉得粒子明明是width: 10px;height: 20px;宽高不一致的，可显示出来却是一样。原来播放器的60度真的有影响。。
问题是，粒子应该是独立的。。为何会受小播影响。它怎么知道要跟着小播走啊。。

南无月

井player::before是中间圈两条金色的线；
井player::after是内圈虚线设置。。
原来是用两个伪元素和边框共同完成的小播。。。
这个思路和创意厉害，小播虚实相间，简单线条组合并转动，效果绝佳。

南无月

下方的旋转的椭圆，如神秘的玄幻之门，
这些灵动的粒子从其中飞出，到天空中渐隐，
生生不息，无穷无尽~~
整贴鲜活艳丽，吸人眼球。。完美。。给白老师点赞，108个~~

马黑黑

南无月 发表于 2024-7-25 10:00
原来如此，刚还觉得粒子明明是width: 10px;height: 20px;宽高不一致的，可显示出来却是一样。原来播放器 ...

粒子元素追加到 player 元素中，所以它们是 player 的子元素。在家从父，父亲倾斜了，儿女们跟着摆pose，形状因视角的变化而变化，要保持圆形则需要调整宽高尺寸。

海笑

欣赏老师佳作！

小九

音乐很好听，像印第安人的

红影

强迫自己先不管代码只欣赏帖子。
Moola Mantra是一种具有深远意义的咒语，‌它被认为是一种能够实现所有愿望的工具，‌同时也是一种能够治愈一切疾病的良药。‌
Moola Mantra的魅力在于，‌即使是不了解其含义的人，‌仅仅通过吟唱或聆听，‌也能感受到其强大的力量。‌而当人们了解其含义并带着这种感觉去吟唱时，‌这种力量会以千万倍的形式增强。‌
建议重复播放，‌让这个声音的波动深入内在，‌让神性的祝福充满每一个细胞。‌这种方法利用了身体作为情绪的管道，‌让情绪得以释放。
这个背景让转动效果烘托着一株小苗，这便是神性散发的基准吧，听着音乐，感受着，沉醉了

红影

这首曲子是一首充满力量的古老咒语《Moola Mantra》。古老的梵文会发出一种强大力量的频率,去振荡自身的气场,使之与天地之间的气相接通。
黑黑的制作恰是如此，在其中沉醉，在音乐中遨游，感受到宇宙的力量，‌实现内心的平静和宁静。‌
如此奇妙的帖子，还有这么强大的作用，忍不住合十，，，感悟，，，

红影

这些粒子融入虚空中，犹如烦恼的消散

红影

如此玄妙的帖子

马黑黑

小九 发表于 2024-7-25 19:06
音乐很好听，像印第安人的

不是的。这是英国心灵音乐大师特瑞·欧菲尔德的作品，我做催眠的时候经常会选用他的作品

马黑黑

红影 发表于 2024-7-25 19:46
强迫自己先不管代码只欣赏帖子。
Moola Mantra是一种具有深远意义的咒语，‌它被认为是一种能够实现 ...

这个曲子经常用来做心理治疗辅助音乐

马黑黑

红影 发表于 2024-7-25 20:07
这些粒子融入虚空中，犹如烦恼的消散

这个创意看出来了

马黑黑

红影 发表于 2024-7-25 19:46
强迫自己先不管代码只欣赏帖子。
Moola Mantra是一种具有深远意义的咒语，‌它被认为是一种能够实现 ...

红影

马黑黑 发表于 2024-7-25 22:08
这个曲子经常用来做心理治疗辅助音乐

是的，听听这个曲子，对安抚心灵很有好处呢