旗袍美女

起个网名好难

月婵 发表于 2024-10-9 10:19
太美了！娇娇旗袍女！

谢谢您的支持和欣赏

起个网名好难

老谟深虑

          欣赏旗袍美女，代码成功！点赞！

起个网名好难

1. <div style="width:100%; position:absolute;left:0px;margin-top:120px;">
   
2. <meta name="referrer" content="never" />
   
3. <style>
   
4.         #oBlk        {
   
5.         width:1400px;height:700px; margin-left:50%; left: -700px; position:relative;overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;
   
6.         background:url([img]https://cccimg.com/view.php/923f0b065eb5501da4a3f80ecb22ea06.jpg[/img]) center / cover;}
   
7.         #picHolder        {position:absolute;left:350px;top:80px;width:600px;height:700px;  perspective: 800px;  transform-style: preserve-3d;}
   
8.         .pImg        {width:540px;height:540px;position:absolute;z-index:1;position:absoulute;left:0px;top:0px;
   
9.         transition: 800ms ease-in-out; transform: rotateY(-4deg);border-radius:0 16px 16px 0; opacity:0;
   
10.         mask-image: radial-gra**nt(black 60%, transparent 80%,transparent); mask-size: cover;}
    
11.         .pImg:nth-of-type(2)        {opacity:1;z-index:100;left:0px; top:0px;overflow:hidden;border-radius:12px;box-shadow:2px 2px 4px black;}
    
12.         .pImg:nth-of-type(3)        {opacity:.9;z-index:99;left:10px;top:1px;}
    
13.         .pImg:nth-of-type(4)        {opacity:.8;z-index:98;left:20px;top:2px;}
    
14.         .pImg:nth-of-type(5)        {opacity:.7;z-index:97;left:30px;top:3px;}
    
15.         .pImg:nth-of-type(6)        {opacity:.6;z-index:96;left:40px;top:4px;}
    
16.         .pImg:nth-of-type(7)        {opacity:.5;z-index:95;left:50px;top:5px;}
    
17.         .pImg:nth-of-type(8)        {opacity:.4;z-index:94;left:60px;top:6px;}
    
18.         .pImg:nth-of-type(9)        {opacity:.3;z-index:93;left:70px;top:7px;}
    
19.         .pImg:nth-of-type(10)        {opacity:.2;z-index:92;left:80px;top:8px;}
    
20.         .pImg:nth-of-type(11)        {opacity:.1;z-index:91;left:90px;top:9px;}
    
21. #pBtn        {width:100px;position:absolute;right:150px;bottom:100px;overflow:hidden;border-radius:12px;transform:scaleX(-1);opacity:0.3;}
    
22. </style>
    
23. 
    
24. <div id="oBlk">
    
25.         <div id='picHolder'>
    
26.         </div>
    
27.         <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEXEae6ycLVLNqxrvaoIB8CBs9EmbAmENvSSe5dSMSCaGv58aptOib52Q/640"
    
28.                 id="pBtn" onmouseover="javascript:this.style.opacity=0.8" onmouseout="javascript:this.style.opacity=0.3">
    
29.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1919550337.mp3" loop autoplay></audio>
    
30. </div>
    
31. <script>
    
32. let pics = [
    
33. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEjWkmAT1iaV4JHHYeXqCBluRUzyR1ibicM9lHDlQLcj0lSlIObbyU7mgfA/640",
    
34. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEqElLkvpLWOeaVGzGJUO6A1fYruqsX8tibmkwxhNHsES16cPMpHftPYQ/640",
    
35. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjESGRErqQZxngH8SOAZhOxpiblBuVaPT6Jnv8nZdFhBeS1xdGo8kCia9DA/640",
    
36. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEUNf7ZeZDyTC9u688PNicdg8tXuMvWSZ68EaSicORBZ4P6WKDWrEAVqVg/640",
    
37. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEGL8v5oJUeTZAjL4zqvuxn7FRwzaguiadvgYd3XfwyAWP0gdG1oHWpow/640",
    
38. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEXIic2dvxpVkltjqnb5zLztbgw7DgQyibfsXjXPtbNicWfy1IiaDwlAfic1Q/640",
    
39. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEfs7qJiawMianUrd90iaOt0gZ0zCP8maz94OVCt3z1xS9CZsHiclwqaxxFg/640",
    
40. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEI4ibn6CS2vbK0TZic0rnwRRHY3p0dTLOYlUdN9pickbvopfjDgYwTukHA/640",
    
41. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEJrV8KRgG4ezHUjY8E1qKb8mJoajAS9jFEfZN7mhxpOk0r1a5V5MK0A/640",
    
42. "https://mmbiz.qpic.cn/sz_mmbiz_jpg/1V4YA5e0ovB6H7Zic8SD2fFHJlNJQbGjEoQHpc6icjQwcu1fC33L9x2uNuDWMQ6jdKrR8Knw9pnfFJZTGibRsvIVg/640",
    
43. ];
    
44.         for(idx = 0; idx < pics.length; idx++)        {
    
45.                 let pObj = document.createElement('img');
    
46.                 pObj.className = 'pImg'
    
47.                 pObj.src = pics[idx];
    
48.                 picHolder.appendChild(pObj);
    
49.         }
    
50.         setInterval(() => {
    
51.                 if(!aud.paused)        {
    
52.         let last = picHolder.firstElementChild;
    
53.                 last.remove();
    
54.         picHolder.appendChild(last);}
    
55.       }, 5000);
    
56.         pBtn.onclick = () => aud.paused ? aud.play() : aud.pause();
    
57. </script>
    
58. 
    
59. </div>
    
60. <div style="height:1120px;"></div>

复制代码

起个网名好难

老谟深虑 发表于 2024-10-9 10:24
欣赏旗袍美女，代码成功！点赞！

谢谢您的支持和欣赏

模仿了您的一个帖子不知审核完了没

咕咚来了

起个网名好难 发表于 2024-10-9 10:17
可能您的电脑屏幕分辨率和我的不同，12#还是偏左了，不过比原先有改进。 ...

是屏幕放大的缘故，我是125%，要是100%，确实太偏左了！
在代码中如果有个居中代码就可以避免偏移现象，应该能做到的！

起个网名好难

咕咚来了 发表于 2024-10-9 10:31
是屏幕放大的缘故，我是125%，要是100%，确实太偏左了！
在代码中如果有个居中代码就可以避免偏移现象， ...

今天一直在做帖子居中的试验，看来初步完成了。

这页有个帖子和它的代码都在审核，等它们出来后请您看看是不是居中了。

咕咚来了

起个网名好难 发表于 2024-10-9 10:35
今天一直在做帖子居中的试验，看来初步完成了。

这页有个帖子和它的代码都在审核，等它们出来后请您看看 ...

已经审核完毕。

老谟深虑

起个网名好难 发表于 2024-10-9 10:27
谢谢您的支持和欣赏

模仿了您的一个帖子不知审核完了没

         你的贴子我已审核了。

吴林海

欣赏你的【旗袍美女】精美制作，点赞！后面旗袍美女不见了！