大河悠久

山人

山人

帖子代码

1. <style>
   
2. #tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; }
   
3. #tz::before { position: absolute; content: ''; width: var(--size); height: var(--size); background: linear-gradient(cyan, olive, orange, navy); animation: spin 12s linear infinite var(--state); }
   
4. #nr { position: absolute; padding: 10px; background: url('https://638183.freep.cn/638183/t24/2/dahe.jpg') no-repeat center/cover; inset: 6px; }
   
5. txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 0; width: 50px; height: 50px; font: normal 30px sans-serif; color: white; transition: .5s; cursor: pointer; animation: move 5s var(--delay) linear infinite alternate var(--state); }
   
6. txt-box::after { position: absolute; content: ''; inset: -6px; border: thick groove olive; border-radius: 50%; box-shadow: inset 0 0 30px lightblue; transform: perspective(1000px) rotateY(-60deg) rotateZ(0); animation: rot 5s var(--delay) linear infinite alternate var(--state); }
   
7. txt-box:hover { filter: hue-rotate(60deg) drop-shadow(0 -10px 30px white); }
   
8. #vid { position: absolute; left: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; pointer-events: none; }
   
9. #bird { position: absolute; left: 1024px; top: -70px; mix-blend-mode: multiply; animation: fly linear 6s infinite var(--state); }
   
10. @keyframes move { to { bottom: 150px; } }
    
11. @keyframes rot { to { transform: perspective(1000px) rotateY(60deg) rotateZ(360deg); } }
    
12. @keyframes spin { to { transform: rotate(360deg); } }
    
13. @keyframes fly { to { left: -400px; } }
    
14. </style>
    
15. 
    
16. <div id="tz">
    
17.         <div id="nr" data-tt="大河悠久">
    
18.                 <audio id="aud" src="https://music.163.com/song/media/outer/url?id=4904991" autoplay loop></audio>
    
19.                 <video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/32/44/62dde814a8a83.mp4" muted autoplay loop disablePictureInPichture></video>
    
20.                 <img id="bird" alt="" src="https://638183.freep.cn/638183/small/flybirds.gif" />
    
21.         </div>
    
22. </div>
    
23. 
    
24. <script>
    
25. (function() {
    
26.         tz.style.setProperty('--size', Math.ceil(Math.sqrt(tz.offsetWidth ** 2 + tz.offsetHeight ** 2)) + 'px');
    
27.         const ar = nr.dataset.tt.split('');
    
28.         const total = ar.length, half = Math.floor(ar.length / 2);
    
29.         let tbAr = [];
    
30. 
    
31.         ar.forEach((t,k) => {
    
32.                 let tbox = document.createElement('txt-box');
    
33.                 tbox.textContent = t;
    
34.                 tbox.style.cssText += `
    
35.                         --xx: ${100 * k + 50}px;
    
36.                         --delay: -${k <= half ? k * 0.5 : (total - k) * 0.5}s;
    
37.                 `;
    
38.                 tbAr.push(tbox);
    
39.                 nr.appendChild(tbox);
    
40.         });
    
41. 
    
42.         aud.onplaying = aud.onpause = () => {
    
43.                 tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
    
44.                 aud.paused ? vid.pause() : vid.play();
    
45.                 tbAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);
    
46.         };
    
47. 
    
48.         tbAr.forEach(item => item.onclick = () => aud.paused ? aud.play() : aud.pause());
    
49. })();
    
50. </script>

复制代码

山人

主要特点：

（一）流金溢彩边框

使用旋转的 ::before 伪元素模拟。伪元素背景渐变，它应该是一个正方形，宽高应大于宿主元素最长边的尺寸，在JS中计算完成，做帖者无需计算，但可以了解一下计算原理：勾股定理，c&#178; = a&#178; + b&#178;，c 即为伪元素的边长，a、b 是帖子容器元素的边长。

（二）文本按钮动画

请参阅马老师的帖子： https://www.huachaowang.com/foru ... &extra=page%3D1

山人

可以考虑将文本按钮的文本也纳入3d转换场景。本帖出于保护文本阅读的友好性，未如此操作。

小辣椒

这个标题字效果也是特棒！

小辣椒

整体效果也是漂亮

争取套用一个玩玩

红影

3d边框的实例呢，这个漂亮，意境悠远。欣赏山人好帖

红影

视频的滤镜加得好，这样设置后，落日就成了月亮的效果了，原来视频还可以这样转化呢。
动图的移动也漂亮。流动边框也很漂亮。
还有些没看懂，比如tbAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);，最后那句也出现item，对这个不太理解呢

红影

嗯，现在知道了，item本来就是自己设的，这个设成什么都行的

山人

红影 发表于 2024-6-8 17:25
嗯，现在知道了，item本来就是自己设的，这个设成什么都行的

马老师没有交过这个么？太疏忽了

山人

红影 发表于 2024-6-8 17:11
视频的滤镜加得好，这样设置后，落日就成了月亮的效果了，原来视频还可以这样转化呢。
动图的移动也漂亮。 ...

video是可视元素，所有可视元素 都可以通过 mix-blend-mode 滤镜致使它和下层的背景融合。

数组（或可迭代对象）.forEach(...) 循环遍历，需要给出至少一个参数，该参数指向数组元素自身，自命名；另外根据需要还可以有第二、第三个参数，其中常用的是第二个，指向数组元素的下标：

ar.forEach((item, key) => ...);

这里，item 是数组元素，key 是该元素的下标。省略号代表处理数组元素细节代码。

山人

醉美水芙蓉 发表于 2024-6-8 17:03
欣赏老师的精彩！

美美下午好

山人

红影 发表于 2024-6-8 16:55
3d边框的实例呢，这个漂亮，意境悠远。欣赏山人好帖

你可能会发现，“边框”对帖子子元素而言，是“透明”的

山人

小辣椒 发表于 2024-6-8 13:03
整体效果也是漂亮

争取套用一个玩玩

马老师同意就行

山人

小辣椒 发表于 2024-6-8 12:59
这个标题字效果也是特棒！

感谢管管支持

樵歌

小辣椒 发表于 2024-6-8 13:03
整体效果也是漂亮

争取套用一个玩玩

等你做好了，我来抄你的。

樵歌

震憾！和马老师不相上下！

樵歌

帖子关了，音乐一直有。奇怪了。

小辣椒

山人 发表于 2024-6-8 17:49
马老师同意就行

马老师是最善解人意的，肯定同意的