|
|

楼主 |
发表于 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[flag]);
- son.classList.add(classes[(flag + 1) % classes.length]);
- ma.style.setProperty('--state', states[flag]);
- });
- }
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|