日子和谁过都一样（学习黑黑老师的失重宇宙代码）
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
#pa { --offsetX: 81px; --bg: url('https://img2.oldkids.cn/upload/2025/08/05/blog_260798238_20250805080252609.jpg') no-repeat center/cover; --ma-size: 200px; }
#btnFs { left: -20px; bottom: 20px; color: #eee; }
#mwrap { position: absolute; bottom: 5px; width: 400px; height: 400px; filter: drop-shadow(-40px 80px 0 rgba(255, 255, 255, .15)); }
#ma { left: 22%; top: 20%; display: grid; place-items: center;border-radius: 50%;transform: rotateX(35deg) rotateY(0deg); animation: rot 8s linear infinite var(--state); }
#ma:hover {background: hsla(210, 100%, 60%,.25); box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);transform: scale(1.05); }
#ma::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(skyblue, LawnGreen,snow); }
.son { position: absolute; width: 100%; height: 4px; background: repeating-radial-gradient(circle, white, transparent, white 20%); transform: rotate(var(--a)); }
.son::before, .son::after { content: ''; position: absolute; left: -30px; top: calc(50% - 15px); width: 30px; height: 30px; background: inherit; border-radius: 50%; }
.son::after { left: 100%; }
.title-text { font-size: 40px; }
.ani { animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state); }
@keyframes flash { to { color: cyan; opacity: .7; font-size: 30px; } }
@keyframes rot { to { transform: rotateX(45deg) rotateY(15deg) rotateZ(360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://img4.oldkids.cn/upload/2025/08/06/blog_260798238_20250806101456169.mp3" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c9358c0c5a.mp4" autoplay loop muted></video>
<div id="mwrap">
<div id="ma" class="invert"></div>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var txtAr = '日子和谁过都一样'.split(''), spans = [], total = 7;
txtAr.forEach( (t, k) => {
var s = document.createElement('span');
s.textContent = t;
s.className = k === 0 ? 'title-text ani' : 'title-text';
var a = -120 / (txtAr.length - 1) * k - 110, r = 160;
s.style.cssText += `
left: ${r + r * Math.cos(a * Math.PI / 180)}px;
top: ${r + r * Math.sin(a * Math.PI / 180)}px;
`;
spans.push(s);
s.onanimationend = () => {
s.classList.remove('ani');
spans[(k + 1) % txtAr.length].classList.add('ani');
};
mwrap.appendChild(s);
});
Array.from({length: total}).forEach( (s,k) => {
s = document.createElement('span');
s.classList.add('son');
s.style.cssText += `--a: ${180 / total * k}deg;`;
ma.appendChild(s);
});
</script> 猎豹浏览器打开是一半画面的 制作大气，歌声唯美，感谢梦江南带来的精彩，辛苦了~！ 可能猎豹浏览器不兼容？QQ浏览器、Microsoft Edge浏览器就正常 偶然~ 发表于 2025-8-6 16:13
猎豹浏览器打开是一半画面的
问好老师，猎豹浏览器打开是一半画面的啊？不好意思。 偶然~ 发表于 2025-8-6 16:14
制作大气，歌声唯美，感谢梦江南带来的精彩，辛苦了~！
谢谢老师欣赏支持，祝夏安！ 偶然~ 发表于 2025-8-6 16:18
可能猎豹浏览器不兼容？QQ浏览器、Microsoft Edge浏览器就正常
哇，老师为了看帖子，装有这么多浏览器，真的很感谢！ 江南把文字放在左侧，这个调整很棒的。
制作很漂亮，欣赏江南好帖{:4_187:} 鼠标触碰后，小播从倾斜变成垂直方向了，这个有点问题，应该是触碰变色，而不是改变空间状态。
江南再看看？{:4_204:} 漂亮的制作，欣赏学习咯{:4_204:} 标题文字还有背影，有意思！ 梦江南 发表于 2025-8-6 16:22
问好老师，猎豹浏览器打开是一半画面的啊？不好意思。
报告江南同志，用的谷歌，打开就精彩！点赞！{:4_199:}{:4_189:} 问好江南，效果漂亮，谢谢精彩分享{:4_171:} 梦江南 发表于 2025-8-6 16:24
哇，老师为了看帖子，装有这么多浏览器，真的很感谢！
3个浏览器 红影 发表于 2025-8-6 18:52
江南把文字放在左侧，这个调整很棒的。
制作很漂亮，欣赏江南好帖
问好影子，谢谢欣赏。江南无才，不会加歌词。 红影 发表于 2025-8-6 18:54
鼠标触碰后，小播从倾斜变成垂直方向了，这个有点问题，应该是触碰变色，而不是改变空间状态。
江南再看看 ...
好的，我试试。 朵拉 发表于 2025-8-6 19:21
漂亮的制作，欣赏学习咯
问好朵拉，谢谢欣赏，学习是客气了。 梦油 发表于 2025-8-6 20:28
标题文字还有背影，有意思！
问好梦油，这个字有背影是黑黑老师设置好的。谢谢欣赏。立秋安康！ 岁月·如歌 发表于 2025-8-6 20:44
报告江南同志，用的谷歌，打开就精彩！点赞！
问好岁月老师，谢谢欣赏点赞。立秋安康！ 杨帆 发表于 2025-8-6 20:48
问好江南，效果漂亮，谢谢精彩分享
问好杨帆，这里也有您的功劳。谢谢欣赏。立秋安康！