论坛 › 时光如水 › 自由的鱼 TO鱼儿 贺芳辰

红影 发表于 2023-2-15 23:37

自由的鱼 TO鱼儿 贺芳辰

<style>
#papa {
      margin: 100px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: tan url('https://pic.imgdb.cn/item/63ece5d1f144a010077bc764.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      display: grid;
      place-items: center;
      z-index: 1;
}
#mplayer {
      --state: paused;
      position: absolute;
      bottom: 460px;
      width: 100px;
      height: 100px;
      left: 22%;
      top: 25%;
      transform:rotate(-55deg);
      background: transparent;
      
      border-radius: 50%;
      display: grid;
      place-items: center;
}
#mplayer:hover {
      cursor: pointer;
      box-shadow: inset 0 0 25px hsla(0,0%,100%,.75), 0 -10px 40px hsla(228,100%,50%,.35);
}
.wave {
      --delay: 0s;
      position: absolute;
      width: 230%;
      height: 230%;
      border: 3px solid hsla(0,0%,100%,.75);
      border-radius: 50%;
      clip-path: inset(10% 0 0 0);
      animation: fade .6s var(--delay) infinite var(--state);
}
.wave:nth-of-type(2) { --delay: .3s; width: 170%; height: 170%; }
.wave:nth-of-type(3) { --delay: .6s; width: 110%; height: 110%; }

@keyframes fade {
      from { opacity: .7; }
      to { opacity: 0.2; }
}
</style>

<div id="papa">
      <div id="mplayer">
                <span class="wave"></span>
                <span class="wave"></span>
                <span class="wave"></span>                              
      </div>
<div style="position: absolute; left:40%; top: 36%; width:420px; opacity: .85;">
                <img alt="" src="https://pic.imgdb.cn/item/63ecf637f144a01007a2b4b7.png"/>            
      </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2006847076.mp3" loop autoplay></audio>

<script>
(function() {
      (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);
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());
      mplayer.addEventListener('click', () => {
                aud.paused ? aud.play() : aud.pause();
      });
      FS({pa: papa, set: 'color: snow; background: hsla(223,87%,72%,.75); top:91%;left:10%;border: 2px solid snow;',});
})();
</script>

红影 发表于 2023-2-15 23:38

不知道具体时间，怕错过了鱼儿的生日，匆忙做个。祝福鱼儿生日快乐{:4_187:}

红影 发表于 2023-2-15 23:41

刚跑清舟帖子里看了一眼，原来鱼儿是27号的生日。没事，咱们先热热闹闹地庆祝着{:4_173:}

鱼儿 发表于 2023-2-16 02:19

对！多热闹几天{:4_173:}

庶民 发表于 2023-2-16 05:07

很有趣的，有意境，祝福也美好。

樵歌 发表于 2023-2-16 08:43

鱼儿生日快乐！

鱼儿 发表于 2023-2-16 09:21

樵歌 发表于 2023-2-16 08:43
鱼儿生日快乐！

谢谢{:4_204:}

海笑 发表于 2023-2-16 10:22

共祝鱼儿生日快乐！

小九 发表于 2023-2-16 12:05

美人鱼呢，真美，鱼儿收礼开心！ 生日快乐！{:4_187:}

小辣椒 发表于 2023-2-16 12:48

亲爱的，美人鱼太诱惑了，漂亮的制作{:4_178:}

小辣椒 发表于 2023-2-16 12:48

借美帖祝鱼儿生日快乐！{:4_177:}

红影 发表于 2023-2-16 16:54

鱼儿 发表于 2023-2-16 02:19
对！多热闹几天

清舟的催生可真早{:4_173:}

红影 发表于 2023-2-16 16:55

庶民 发表于 2023-2-16 05:07
很有趣的，有意境，祝福也美好。

借祝福，也顺便学习一下代码帖{:4_173:}

红影 发表于 2023-2-16 16:55

海笑 发表于 2023-2-16 10:22
共祝鱼儿生日快乐！

跟海笑一起祝福{:4_204:}

红影 发表于 2023-2-16 16:56

小九 发表于 2023-2-16 12:05
美人鱼呢，真美，鱼儿收礼开心！ 生日快乐！

鱼儿的名字很容易让人想到美人鱼{:4_173:}

红影 发表于 2023-2-16 16:57

小辣椒 发表于 2023-2-16 12:48
亲爱的，美人鱼太诱惑了，漂亮的制作

谢谢亲爱的，跟亲爱的一起祝福鱼儿生日{:4_187:}

雨中悄然 发表于 2023-2-16 18:13

这个播放器好漂亮，跟光束和美人鱼浑然一体
影子好厉害{:4_187:}

雨中悄然 发表于 2023-2-16 18:14

鱼儿生日快乐，天天快乐{:4_187:}

红影 发表于 2023-2-16 19:15

雨中悄然 发表于 2023-2-16 18:13
这个播放器好漂亮，跟光束和美人鱼浑然一体
影子好厉害

我把小喇叭改造了一下，让它跑到圈圈外面了{:4_173:}

鱼儿 发表于 2023-2-16 19:51

红影 发表于 2023-2-16 16:56
鱼儿的名字很容易让人想到美人鱼

其实我原来有个马甲叫小丑鱼{:4_196:}

查看完整版本: 自由的鱼 TO鱼儿 贺芳辰