论坛 › 动画音画 › Moola Mantra

马黑黑 发表于 2024-7-25 07:52

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>

马黑黑 发表于 2024-7-25 07:52

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#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); } }
&lt;/style&gt;

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

&lt;script&gt;
var all = 100;
for(var i = 0; i &lt; 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 = () =&gt; papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.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-25 08:01

本帖：

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

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

愤怒的葡萄 发表于 2024-7-25 08:10

背景音乐挺好听的。

梦江南 发表于 2024-7-25 08:29

欣赏学习老师的佳作！{:4_187:}

南无月 发表于 2024-7-25 10:00

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

（一）播放器利用 主元素+两个伪元素 的边框样式构建，再加入粒子若干。播放器沿X轴转60度与水面 ...
原来如此，刚还觉得粒子明明是width: 10px;height: 20px;宽高不一致的，可显示出来却是一样。原来播放器的60度真的有影响。。
问题是，粒子应该是独立的。。为何会受小播影响。它怎么知道要跟着小播走啊。。{:4_170:}

南无月 发表于 2024-7-25 10:01

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

南无月 发表于 2024-7-25 10:01

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

马黑黑 发表于 2024-7-25 12:02

南无月 发表于 2024-7-25 10:00
原来如此，刚还觉得粒子明明是width: 10px;height: 20px;宽高不一致的，可显示出来却是一样。原来播放器 ...
粒子元素追加到 player 元素中，所以它们是 player 的子元素。在家从父，父亲倾斜了，儿女们跟着摆pose，形状因视角的变化而变化，要保持圆形则需要调整宽高尺寸。

海笑 发表于 2024-7-25 13:53

欣赏老师佳作！

小九 发表于 2024-7-25 19:06

音乐很好听，像印第安人的{:4_187:}

红影 发表于 2024-7-25 19:46

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

红影 发表于 2024-7-25 19:49

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

红影 发表于 2024-7-25 20:07

这些粒子融入虚空中，犹如烦恼的消散{:4_187:}

红影 发表于 2024-7-25 20:08

如此玄妙的帖子{:4_199:}

马黑黑 发表于 2024-7-25 22:08

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

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

马黑黑 发表于 2024-7-25 22:08

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

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

马黑黑 发表于 2024-7-25 22:09

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

这个创意看出来了

马黑黑 发表于 2024-7-25 22:10

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

{:4_190:}

红影 发表于 2024-7-25 22:36

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

是的，听听这个曲子，对安抚心灵很有好处呢{:4_187:}

查看完整版本: Moola Mantra