绿叶清舟 发表于 2023-4-21 21:29

天行九歌


<style>
#papa { margin: -80px 0 0 calc(50% - 633px); width: 1100px; height: 700px; background: lightblue url('https://pic.imgdb.cn/item/640d8bdbf144a0100715ec8c.jpg') center/cover no-repeat; box-shadow: 6px 3px 30px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#mplayer { top: 60px; right: 360px; width: 100px; height: 100px; border-radius: 50%; background: #e61300; box-shadow: 5px 15px 38px #e8e568 inset; cursor: pointer; animation: rot2d 8s infinite linear var(--state); position: absolute; transition: box-shadow .6s; --state: running; }

#mplayer:hover { box-shadow: 5px 5px 60px #f3dc2f inset; }
#mplayer::after { top: -60px; right: -60px; bottom: -60px; left: -60px; --angle: -1080deg; }
#papa:fullscreen #mplayer { width: 80px; height: 80px; }
#papa:fullscreen #mplayer::before { top: -70px; right: -70px; bottom: -70px; left: -70px; }
#papa:fullscreen #mplayer::after { top: -80px; right: -80px; bottom: -80px; left: -80px; }
@keyframes rot2d { to { transform: rotate(360deg); } }
@keyframes rot3d { to { transform: perspective(1000px) rotateY(45deg) rotateX(15deg) rotateZ(var(--angle)); } }
</style>

<div id="papa">
      <div id="mplayer"></div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=519460354" autoplay loop></audio>
</div>

<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 ? 'pasued' : '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: none; border: 2px solid snow; bottom: 20px;'});
})();
</script>

马黑黑 发表于 2023-4-21 21:43

瞧瞧

樵歌 发表于 2023-4-22 05:44

会意画的在作画上下功夫，不会的像我）在选画上费时间{:4_173:}

红影 发表于 2023-4-22 07:57

那个太阳播放器还有流动的光彩呢，真漂亮。这个不知道是黑黑的哪个效果？是清舟自己设计的播放器吧，厉害{:4_199:}

红影 发表于 2023-4-22 08:00

又是奇特的色彩，很有些玄幻的味道。寓意着那些在历史长河里隐现的英雄人物。清舟好制作{:4_199:}

绿叶清舟 发表于 2023-4-22 10:47

红影 发表于 2023-4-22 07:57
那个太阳播放器还有流动的光彩呢，真漂亮。这个不知道是黑黑的哪个效果？是清舟自己设计的播放器吧，厉害{: ...

谢谢影，是黑的效果，就是去掉了二个圈的

绿叶清舟 发表于 2023-4-22 10:47

樵歌 发表于 2023-4-22 05:44
会意画的在作画上下功夫，不会的像我）在选画上费时间

选画也很费功夫的啊

绿叶清舟 发表于 2023-4-22 10:47

马黑黑 发表于 2023-4-21 21:43
瞧瞧

瞧去啥了

马黑黑 发表于 2023-4-22 10:49

绿叶清舟 发表于 2023-4-22 10:47
瞧去啥了

瞧瞧九歌

雨中悄然 发表于 2023-4-22 12:15

大气恢宏，清舟一贯特色{:4_199:}

梦缘 发表于 2023-4-22 19:18

好大的气势，欣赏点赞！{:4_185:}

绿叶清舟 发表于 2023-4-22 20:15

梦缘 发表于 2023-4-22 19:18
好大的气势，欣赏点赞！

谢谢梦缘，晚上好

绿叶清舟 发表于 2023-4-22 20:15

雨中悄然 发表于 2023-4-22 12:15
大气恢宏，清舟一贯特色

这辈子改不了了{:4_189:}

樵歌 发表于 2023-4-22 20:42

绿叶清舟 发表于 2023-4-22 10:47
选画也很费功夫的啊

总比自己画轻松哇{:4_173:}

绿叶清舟 发表于 2023-4-22 21:03

樵歌 发表于 2023-4-22 20:42
总比自己画轻松哇

一样不轻松的了

红影 发表于 2023-4-22 22:09

绿叶清舟 发表于 2023-4-22 10:47
谢谢影，是黑的效果，就是去掉了二个圈的

清舟的帖子很会动脑筋，这个帖子好棒{:4_199:}

樵歌 发表于 2023-4-23 07:07

绿叶清舟 发表于 2023-4-22 21:03
一样不轻松的了

嗯己径感受到了{:4_173:}
页: [1]
查看完整版本: 天行九歌