《Call of Silence》（学习黑黑《机械之心》代码效果）
<style>#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/6816b2c158cb8da5c8da0bf0.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; perspective: 800px; display: grid; place-items: center; position: relative; }
#mum { position: absolute; aspect-ratio: 1/1; width: 24%; top: 6%; transform-style: preserve-3d; animation: rot 10s linear infinite var(--state); cursor: pointer; }
#mum:hover .son { filter: unset; }
.son { position: absolute; width: 100%; height: 100%; background: url('https://pic1.imgdb.cn/item/686d341158cb8da5c8977e91.png') no-repeat center/ 100% 100%; border: 0px dashed #fcedbb; border-radius: 30%; transform: rotateY(var(--a)) rotateZ(-45deg); filter: hue-rotate(calc(var(--a) + 45deg)); transition: 1s; --a: 5deg; }
.son::before { position: absolute; content: ''; width: 100%; height: 100%; background: inherit; transform: scale(-1); }
#btnFs { bottom: 20px; color: #eee; }
.vid {position: absolute; width: 115%; height: 115%; bottom: 0; left: 0; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .45; pointer-events: none; }
@keyframes rot { to { transform: rotate3d(1, 0, 1, 360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://file.uhsea.com/2505/966e04c4fccfd35050fa51616b4c9c3bKX.mp3" autoplay loop></audio>
<video class="vid" src="https://video.699pic.com/videos/39/55/21/b_atFBI8CVicD81590395521.mp4" autoplay loop muted></video>
<video class="vid" src="https://video.699pic.com/videos/32/88/75/b_nCp2D6Xf2uuk1555328875.mp4" autoplay loop muted></video>
<div id="mum"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(papa, mum);
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
lrc_css: 'font: bold 2.8em STLiti; color: #fcedbb; --bg: #00BFFF; z-index: 2; bottom: 4%;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
const total = 20;
Array.from({length: total}).forEach( (d, k) => {
d = document.createElement('div');
d.className = 'son';
d.style.setProperty('--a', k * 360 / total + 'deg');
mum.appendChild(d);
});
</script> 聊天中说起很多帖子做得不成功，就废弃了。然后就想起了这个，本来是做《Heman Legacy》响应式频谱，做完了发现运作不了，也没舍得做好的歌词，就弄这来了。这个小播像不像刺猬@马黑黑 {:4_173:} Don’t这样的单词分得太开了，记得黑黑讲过怎么弄的，忘记了。就这样吧{:4_173:} 五彩缤纷的圆球真美。 漂亮！谢谢影子精彩分享{:4_171:} 那个圆形转运的五彩粒子非常好看。两个相片背景一明一暗，做到也非常不容易！ 背景图左上角有一块儿斜着的雨棚样东西能去掉吗。 等@马黑黑 黑大师来点评。{:4_190:} 梦油 发表于 2025-7-26 16:46
五彩缤纷的圆球真美。
我弄了个带小点点的图图做小播，弄上去还挺别致，然后就用这个了{:4_173:} 杨帆 发表于 2025-7-26 17:43
漂亮！谢谢影子精彩分享
谢谢杨帆鼓励，你的鼓励是我继续学习的动力{:4_187:} 樵歌 发表于 2025-7-26 17:53
那个圆形转运的五彩粒子非常好看。两个相片背景一明一暗，做到也非常不容易！
这个图图是以前做的好玩的，被我用来做背景图了{:4_173:} 樵歌 发表于 2025-7-26 17:56
背景图左上角有一块儿斜着的雨棚样东西能去掉吗。
这不是雨棚啊，其实这个是马路上的广告牌，上面弄了头像{:4_189:} 红影 发表于 2025-7-26 21:35
我弄了个带小点点的图图做小播，弄上去还挺别致，然后就用这个了
很漂亮，很漂亮。 红影 发表于 2025-7-26 21:35
谢谢杨帆鼓励，你的鼓励是我继续学习的动力
互相鼓励，好好学习天天向上{:4_171:} 红影 发表于 2025-7-26 12:34
聊天中说起很多帖子做得不成功，就废弃了。然后就想起了这个，本来是做《Heman Legacy》响应式频谱，做完了 ...
音频资源此刻无法使用 樵歌 发表于 2025-7-26 17:57
等@马黑黑 黑大师来点评。
{:4_171:} 真漂亮啊！影子出手就不一样了，还带了歌词。真赞！{:4_187:} 梦油 发表于 2025-7-26 21:53
很漂亮，很漂亮。
谢谢梦油，你的鼓励就是我学习的动力{:4_187:} 杨帆 发表于 2025-7-26 22:24
互相鼓励，好好学习天天向上
嗯嗯，争取更多进步{:4_187:} 马黑黑 发表于 2025-7-27 07:44
音频资源此刻无法使用
这个曲子我还重新上传的屋舍呢，只是忘记了当时为什么弄不出来了{:4_173:}