古屋

马黑黑

全屏观赏

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         --state: paused;
   
4.         margin: -80px 0 0 calc(50% - 593px);
   
5.         display: grid;
   
6.         place-items: center;
   
7.         width: 1024px;
   
8.         height: 640px;
   
9.         background: lightblue url('https://638183.freep.cn/638183/t23/webp/guwu.webp') no-repeat center/cover;
   
10.         box-shadow: 6px 3px 20px #000;
    
11.         user-select: none;
    
12.         position: relative;
    
13.         z-index: 1;
    
14. }
    
15. #btnFs {
    
16.         position: absolute;
    
17.         bottom: 20px;
    
18.         width: fit-content;
    
19.         height: fit-content;
    
20.         padding: 6px;
    
21.         border-radius: 6px;
    
22.         border: 2px solid green;
    
23.         color: lightgreen;
    
24.         text-shadow: 1px 1px 1px #000;
    
25.         display: none;
    
26.         cursor: pointer;
    
27. }
    
28. #mplayer {
    
29.         position: absolute;
    
30.         left: 36%;
    
31.         top: 0;
    
32.         width: 50px;
    
33.         height: 50px;
    
34.         background: hsla(120,100%,95%,.25);
    
35.         border-radius: 50%;
    
36.         box-shadow:
    
37.                 0 60px 20px 10px hsla(120,100%,50%,.45),
    
38.                 0 140px 20px 20px hsla(120,100%,60%,.45),
    
39.                 0 240px 20px 30px hsla(120,100%,70%,.45),
    
40.                 0 360px 20px 40px hsla(120,100%,80%,.45),
    
41.                 0 500px 20px 50px hsla(120,100%,90%,.45);
    
42.         transform: rotate(-30deg);
    
43.         animation: rot 3s ease-in-out infinite alternate var(--state);
    
44.         cursor: pointer;
    
45. }
    
46. #mplayer::before {
    
47.         position: absolute;
    
48.         content: '';
    
49.         left: -20px;
    
50.         width: 100px;
    
51.         height:580px;
    
52. }
    
53. 
    
54. @keyframes rot { to { transform: rotate(-40deg); } }
    
55. </style>
    
56. 
    
57. <div id="papa">
    
58.         <div id="mplayer"></div>
    
59.         <div id="btnFs">全屏观赏</div>
    
60.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2027168041.mp3" autoplay loop></audio>
    
61. </div>
    
62. 
    
63. <script>
    
64. (function() {
    
65.         let fs = false, timerId;
    
66.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
67.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
68.         aud.addEventListener('play', () => mState());
    
69.         aud.addEventListener('pause', () => mState());
    
70.         aud.addEventListener('ended', () => playNext());
    
71.         papa.addEventListener('mousemove', (e) => {
    
72.                 clearTimeout(timerId);
    
73.                 btnFs.style.display = 'block';
    
74.                 timerId = setTimeout('btnFs.style.display = "none"', 3000);
    
75.         });
    
76.         btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
    
77.         document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
    
78. })();
    
79. </script>

复制代码

辫子哥哥

沙发？

辫子哥哥

这个老屋真的老的，看起来有千把年了

辫子哥哥

看看旁边的树根千年都不止

庶民

真的好古老的。

马黑黑

庶民 发表于 2023-3-4 16:47
真的好古老的。

太古老了

马黑黑

辫子哥哥 发表于 2023-3-4 16:31
沙发？

硬板凳

马黑黑

辫子哥哥 发表于 2023-3-4 16:33
看看旁边的树根千年都不止

三千年

辫子哥哥

马黑黑 发表于 2023-3-4 17:11
硬板凳

需要扶贫？

辫子哥哥

马黑黑 发表于 2023-3-4 17:11
三千年

确实古老了，稀有珍宝了

梦缘

照到屋顶，很有意境，欣赏点赞！

马黑黑

醉美水芙蓉 发表于 2023-3-4 17:48
千年古树！

屋子也老

马黑黑

辫子哥哥 发表于 2023-3-4 17:17
确实古老了，稀有珍宝了

韩国人已帮申遗了

马黑黑

辫子哥哥 发表于 2023-3-4 17:16
需要扶贫？

没到那地步

马黑黑

梦缘 发表于 2023-3-4 17:24
照到屋顶，很有意境，欣赏点赞！

感谢临帖支持

樵歌

一道道藍光射来，把古屋里妖精吓尿了

马黑黑

樵歌 发表于 2023-3-4 18:43
一道道藍光射来，把古屋里妖精吓尿了

妖精尿贵比黄金，快去收集

千羽

诡异的古屋和大树，光圈播放器很漂亮