失重宇宙
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/uvyv.webp') 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: 70px; bottom: 80px; display: grid; place-items: center; transform: rotateX(45deg) rotateY(15deg); animation: rot 8s linear infinite var(--state); }
#ma::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(skyblue, 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://music.163.com/song/media/outer/url?id=1963404006" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52e01dad564.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 - 210, 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> 代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/uvyv.webp') 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: 70px; bottom: 80px; display: grid; place-items: center; transform: rotateX(45deg) rotateY(15deg); animation: rot 8s linear infinite var(--state); }
#ma::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(skyblue, 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://music.163.com/song/media/outer/url?id=1963404006" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52e01dad564.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 - 210, 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>
小播的设计详情请参阅：
小播filter阴影演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
带投影的小播，真漂亮，失重宇宙，失重下的阴影{:4_199:} 小播触碰选用了class="invert" 效果变化很明显呢。
弧度的转动高亮标题字也很漂亮{:4_199:} 问好老师，谢谢精彩分享。{:4_187:} 漂亮！谢谢马老师精彩示范与讲解{:4_191:} 杨帆 发表于 2025-8-1 16:17
漂亮！谢谢马老师精彩示范与讲解
{:4_190:} 梦江南 发表于 2025-8-1 14:33
问好老师，谢谢精彩分享。
{:4_191:} 红影 发表于 2025-8-1 12:58
带投影的小播，真漂亮，失重宇宙，失重下的阴影
{:4_191:} 马黑黑 发表于 2025-8-1 18:35
黑黑讲解完就有实例，真好{:4_187:} 红影 发表于 2025-8-1 20:15
黑黑讲解完就有实例，真好
举个栗子总是美好的 欣赏黑黑的精彩分享{:4_187:} 小辣椒 发表于 2025-8-2 15:12
欣赏黑黑的精彩分享
{:4_190:} 马黑黑 发表于 2025-8-1 23:05
举个栗子总是美好的
尤其这个栗子还是来自宇宙深处的{:4_173:} 红影 发表于 2025-8-2 21:45
尤其这个栗子还是来自宇宙深处的
好吃吧 马黑黑 发表于 2025-8-2 22:44
好吃吧
太神秘，不敢吃啊{:4_173:} 红影 发表于 2025-8-3 10:41
太神秘，不敢吃啊
那就先看着 马黑黑 发表于 2025-8-3 12:01
那就先看着
嗯嗯，留着栗子使劲看{:4_173:} 红影 发表于 2025-8-3 22:38
嗯嗯，留着栗子使劲看
不流口水就好