莲花池

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         --state: paused;
   
4.         left: calc(50% - 81px);
   
5.         transform: translateX(-50%);
   
6.         width: 1024px;
   
7.         height: 640px;
   
8.         background: teal url('https://638183.freep.cn/638183/t23/webp/lmhxii.webp') no-repeat center/cover;
   
9.         box-shadow: 8px 4px 18px hsla(0,0%,0%,.28);
   
10.         display: grid;
    
11.         place-items: center;
    
12.         position: relative;
    
13.         z-index: 1;
    
14. }
    
15. #papa::before, #papa::after {
    
16.         position: absolute;
    
17.         content: '';
    
18.         left: -8px;
    
19.         top: -8px;
    
20.         right: -8px;
    
21.         bottom: -8px;
    
22.         border: 8px solid green;
    
23.         border-radius: 6px;
    
24.         pointer-events: none;
    
25.         clip-path: inset(90% 0% 0% 0%);
    
26.         animation: clip 12s infinite linear;
    
27.         animation-play-state: var(--state);
    
28. }
    
29. #papa::after {
    
30.         animation-delay: -6s;
    
31. }
    
32. #mplayer {
    
33.         position: absolute;
    
34.         bottom: 30px;
    
35.         width: 200px;
    
36.         height: 200px;
    
37.         background: url('https://638183.freep.cn/638183/t23/1/lotus.png') no-repeat center/cover;
    
38.         border-radius: 50%;
    
39.         cursor: pointer;
    
40.         animation: spin 10s infinite linear;
    
41.         animation-play-state: var(--state);
    
42. }
    
43. @keyframes spin { to { transform: rotate(-1turn); } }
    
44. @keyframes clip {
    
45.         25% { clip-path: inset(0% 0% 0% 90%); border-color: green; }
    
46.         50% { clip-path: inset(0% 0% 90% 0%); border-color: lightgreen; }
    
47.         75% { clip-path: inset(0% 90% 0% 0%); border-color: orange; }
    
48.         100% { clip-path: inset(90% 0% 0% 0%); border-color: darkgreen; }
    
49. }
    
50. </style>
    
51. 
    
52. <div id="papa">
    
53.         <div id="mplayer"></div>
    
54.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=448520354.mp3" autoplay loop></audio>
    
55. </div>
    
56. 
    
57. <script>
    
58. (function() {
    
59.         (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);
    
60.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
61.         aud.addEventListener('pause', () => mState());
    
62.         aud.addEventListener('play', () => mState());
    
63.         mplayer.addEventListener('click', () => {
    
64.                 aud.paused ? aud.play() : aud.pause();
    
65.         });
    
66. 
    
67.         FS({
    
68.                 pa: papa,
    
69.                 set: 'color: green; background: transparent; border: 2px solid green; bottom: 6px;',
    
70.         });
    
71. })();
    
72. </script>
    

复制代码

庶民

真的很美，欣赏一会。

小辣椒

来的巧，赶上黑黑的新东东

小辣椒

哇瑟~~又有钱

小辣椒

黑黑这个创意，播放器小图要和整体背景相吻合才有意思

雨中悄然

这个流动是在外框

马黑黑

庶民 发表于 2023-2-8 12:23
真的很美，欣赏一会。

马黑黑

小辣椒 发表于 2023-2-8 12:56
来的巧，赶上黑黑的新东东

简单而美，还有钱钱

马黑黑

小辣椒 发表于 2023-2-8 12:57
黑黑这个创意，播放器小图要和整体背景相吻合才有意思

马黑黑

雨中悄然 发表于 2023-2-8 13:04
这个流动是在外框

下午好

红影

我又是能看图面，看不了效果。不过这荷花池好美啊。夏天在这里里坐会，肯定神清气爽

红影

看了看代码，这个流动边弄到papa上去了， 又是一种表现方式

雨中悄然

马黑黑 发表于 2023-2-8 13:24
下午好

好不好呢

海笑

欣赏老师佳作!