复刻（站得太久） （凡哥代码）

凡哥

令狐冲 发表于 2024-6-14 23:46
我看不到图。。。

你去我这里看看，图片是否出来：http://mhh.52qingyin.cn/art/bsho ... rt=mahei_1717816702

背景图片：https://638183.freep.cn/638183/t24/2/dahe.jpg

另外，我想知道你使用的浏览器是什么、版本号是多少

司敏儿

花简静 发表于 2024-6-16 23:15
敏儿人呢，今天没有看到耶

我在，今天有些忙工作

司敏儿

凡哥 发表于 2024-6-17 11:49
你去我这里看看，图片是否出来：http://mhh.52qingyin.cn/art/bsho ... rt=mahei_1717816702 ...

凡哥老师，

https://638183.freep.cn/638183/t24/2/dahe.jpg 图片手机上不能显示  （Safari ）

司敏儿

1. <style>
   
2. #tz { margin: 30px auto; width: 1024px; height: 640px; overflow: hidden; display: grid; place-items: center; 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>
    

复制代码

司敏儿

#nr { position: absolute; padding: 10px; background: url('https://642303.freep.cn/642303/tu/20240608ty06.webp') no-repeat center/cover; inset: 6px;z-index: 2; }

因为音画背景 加载在 #nr    有部分浏览器 此处强调  宽，高 尺寸，才能显示

凡哥

司敏儿 发表于 2024-6-17 13:12
凡哥老师，

https://638183.freep.cn/638183/t24/2/dahe.jpg 图片手机上不能显示  （Safari ） ...

酱紫，手机浏览器不要用系统自带的，可以在应用商店下一个好用的，Chrome不错，edge也非常有些。一般地，我们建议使用edge浏览器，它目前没有什么限制。

凡哥

司敏儿 发表于 2024-6-17 13:16
#nr { position: absolute; padding: 10px; background: url('https://642303.freep.cn/642303/tu/20240608 ...

嗯，低内核的浏览器还不支持 inset 属性。该属性，以 inset: 6px; 为例，是如下四个属性的简写：

top: 6px;
right: 6px;
bottom: 6px;
left: 6px;

不一定要表达 width 和 height 属性，上面的代码约束子元素的位置，当父元素是 relative 定位，子元素是 absolute 定位，那么，子元素的宽高等于：

width: 父元素宽 - 12
height: 子元素 - 12

当然，可以定义子元素的宽高，然后用 top: 6px; left: 6px; 来定位

司敏儿

凡哥 发表于 2024-6-17 19:46
嗯，低内核的浏览器还不支持 inset 属性。该属性，以 inset: 6px; 为例，是如下四个属性的简写：

top: 6 ...

我先消化消化。。

司敏儿

兼容模式，不显示

司敏儿

3D  旋转，手机上只有一个花瓣