时光停止

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         --state: running;
   
4.         margin: -80px 0 0 calc(50% - 593px);
   
5.         width: 1024px;
   
6.         height: 640px;
   
7.         background: #3D255A url('https://638183.freep.cn/638183/t23/webp/timestop.webp') no-repeat center/cover;
   
8.         box-shadow: 6px 3px 20px #000;
   
9.         position: relative;
   
10.         z-index: 1;
    
11. }
    
12. 
    
13. .clock {
    
14.         position: absolute;
    
15.         width: 300px;
    
16. }
    
17. .clock:nth-of-type(2) {
    
18.         transform: translate(100px,40px) scale(0.5) rotate(-15deg);
    
19. }
    
20. .clock:nth-of-type(3) {
    
21.         transform: translate(100px,190px) scale(0.8) rotate(30deg);
    
22. }
    
23. .clock:nth-of-type(4) {
    
24.         width: 200px;
    
25.         top: 100px;
    
26.         right: 100px;
    
27.         cursor: pointer;
    
28.         transform-origin: 66% 0;
    
29.         animation: swing .8s linear infinite alternate var(--state);
    
30. }
    
31. @keyframes swing {
    
32.         to { transform: rotate(-30deg); }
    
33. }
    
34. </style>
    
35. 
    
36. <div id="papa">
    
37.         <img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
    
38.         <img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
    
39.         <img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
    
40.         <img id="mplayer" class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
    
41. </div>
    
42. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1992712131.mp3" loop autoplay></audio>
    
43. 
    
44. <script>
    
45. (function() {
    
46.         (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
    
47.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
48.         aud.addEventListener('play', () => mState());
    
49.         aud.addEventListener('pause', () => mState());
    
50.         mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
51.         FS({pa: papa, set: 'color: snow; background: none; border: 2px solid snow; bottom: 20px; left: 50%; transform: translate(-50%);',});
    
52. })();
    
53. </script>

复制代码

马黑黑

醉美水芙蓉 发表于 2023-2-13 20:24
怀表排列错落有致，很别致的播放器！

马黑黑

醉美水芙蓉 发表于 2023-2-13 20:23
黑黑老师那个怀表是播放器吗？

小辣椒

黑黑今天又一个新的了，昨天的红太阳还没有发的

小辣椒

有钱有钱

小辣椒

这个好玩的，套用一个去

小辣椒

不过得先钱拿够

小辣椒

黑黑这个表做的漂亮，这个我用什么素材呢

小辣椒

去瞎捣鼓一个看看，反正套用一个玩玩

马黑黑

小辣椒 发表于 2023-2-13 21:09
去瞎捣鼓一个看看，反正套用一个玩玩

这个应该也是简单系列

马黑黑

小辣椒 发表于 2023-2-13 21:06
黑黑今天又一个新的了，昨天的红太阳还没有发的

那可以发了

马黑黑

小辣椒 发表于 2023-2-13 21:08
黑黑这个表做的漂亮，这个我用什么素材呢

想想

马黑黑

小辣椒 发表于 2023-2-13 21:07
有钱有钱

钱钱少不了

小辣椒

马黑黑 发表于 2023-2-13 21:25
这个应该也是简单系列

完成作业了

小辣椒

马黑黑 发表于 2023-2-13 21:26
想想

哈哈，找了发图就可以了

小辣椒

马黑黑 发表于 2023-2-13 21:26
那可以发了

还没有上传，现在去上传

马黑黑

小辣椒 发表于 2023-2-13 21:35
还没有上传，现在去上传

好