APEX

马黑黑 发表于 2025-7-30 12:45

马黑黑 发表于 2025-7-30 12:45

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/apex.jpg') no-repeat center/cover; --ma-size: 320px; }
#btnFs { bottom: 20px; color: #eee; }
.out { transform: rotate(var(--angle)) translate(160px); }
.in { transform: unset; }
.son { position: absolute; background: url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat var(--x1) var(--y1); transition: 1.5s; }
.ani { animation: flash 1s var(--state); }
@keyframes flash { to { color: gold; } }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1333144056" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/91/5b4d7ca804493.mp4" autoplay loop muted></video>
<div class="title-text"></div>
<div id="ma" class="hue-rotate"></div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var txtAr = 'APEX'.split('');
var rows = 8, cols = 8, size = ma.clientWidth, sons = [], spans = [];
var ww = size / cols, hh = size / rows;
for (let j = 0; j < rows; j ++) {
   for (var k = 0; k < cols; k ++) {
         var son = document.createElement('div');
         son.className = 'son';
         son.style.cssText += `
            width: ${ww}px;
            height: ${hh}px;
            left: ${k * ww}px;
            top: ${j * hh}px;
            --x1: ${-1 * k * ww}px;
            --y1: ${-1 * j * hh}px;
            --angle: ${360 * Math.random()}deg;
         `;
         sons.push(son);
         ma.appendChild(son);
   }
}

txtAr.forEach((t, k) => {
   var s = document.createElement('span');
   s.textContent = t;
   s.className = 'title-text';
   s.className = k === 0 ? 'title-text ani' : 'title-text';
   s.style.cssText += `
         bottom: 20px;
         left: ${k * 45 + 30}px;
   `;
   s.onanimationend = () => {
         s.classList.remove('ani');
         spans[(k+1) % txtAr.length].classList.add('ani');
   };
   spans.push(s);
   pa.appendChild(s);
});

aud.onplaying = aud.onpause = () => mState();
setTimeout(() => mState(), 100);

function mState() {
   var flag = +aud.paused, classes = ['out', 'in'], states = ['running', 'paused'];
   sons.forEach(son => {
         son.classList.remove(classes);
         son.classList.add(classes[(flag + 1) % classes.length]);
         ma.style.setProperty('--state', states);
   });
}
</script>

马黑黑 发表于 2025-7-30 12:47

暂停音乐，小播会变成游离破碎的状态。效果原理请参阅万花筒 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

红影发表于 2025-7-30 13:19

这个有小播的支离破碎，还有文字的逐字变色，两个都需要看懂呢{:4_173:}

红影发表于 2025-7-30 13:20

马黑黑发表于 2025-7-30 12:47
暂停音乐，小播会变成游离破碎的状态。效果原理请参阅万花筒 - 马黑黑教程专版 - 花潮论坛 - Powered by D ...

这个设想挺好，暂停了就不用小播了，就弄成了一堆碎片，过河拆桥{:4_173:}

红影发表于 2025-7-30 13:23

小播是动态的，所以肢解后仍然是动态。这个好神奇啊{:4_199:}

杨帆发表于 2025-7-30 14:21

漂亮！“支离破碎”的美，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2025-7-30 17:51

杨帆发表于 2025-7-30 14:21
漂亮！“支离破碎”的美，谢谢马老师精彩分享

{:4_191:}

马黑黑 发表于 2025-7-30 17:53

红影发表于 2025-7-30 13:23
小播是动态的，所以肢解后仍然是动态。这个好神奇啊

背景图截取的依据是尺寸。对于gif、webp或svg动图而言，只要对应尺寸区域存在动画，分散后的碎片也是动着的

马黑黑 发表于 2025-7-30 17:54

红影发表于 2025-7-30 13:20
这个设想挺好，暂停了就不用小播了，就弄成了一堆碎片，过河拆桥

桥的基座没走的

红影发表于 2025-7-30 21:53

马黑黑发表于 2025-7-30 17:53
背景图截取的依据是尺寸。对于gif、webp或svg动图而言，只要对应尺寸区域存在动画，分散后的碎片也是动着 ...

嗯嗯，这个特别奇妙{:4_187:}

红影发表于 2025-7-30 21:54

马黑黑发表于 2025-7-30 17:54
桥的基座没走的

是的，跟宇宙大爆炸似的，炸完还在这一团里{:4_173:}

马黑黑 发表于 2025-7-30 23:47

红影发表于 2025-7-30 21:54
是的，跟宇宙大爆炸似的，炸完还在这一团里

是这么个原理

马黑黑 发表于 2025-7-30 23:48

红影发表于 2025-7-30 21:53
嗯嗯，这个特别奇妙

这好比黄鳝，一节一节切断后，各节都在蠕动着

小辣椒 发表于 2025-7-31 13:59

小辣椒纯欣赏了{:4_187:}

马黑黑 发表于 2025-7-31 14:38

小辣椒发表于 2025-7-31 13:59
小辣椒纯欣赏了

{:4_190:}

红影发表于 2025-7-31 21:58

马黑黑发表于 2025-7-30 23:47
是这么个原理

黑黑的大爆炸也很奇妙{:4_187:}

红影发表于 2025-7-31 21:59

马黑黑发表于 2025-7-30 23:48
这好比黄鳝，一节一节切断后，各节都在蠕动着

弄得我都想找个动图赶快去试验一下了{:4_173:}

马黑黑 发表于 2025-7-31 23:02

红影发表于 2025-7-31 21:59
弄得我都想找个动图赶快去试验一下了

这个完全应该试试

马黑黑 发表于 2025-7-31 23:02

红影发表于 2025-7-31 21:58
黑黑的大爆炸也很奇妙

还好

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

APEX