宇宙电波TO悄然
本帖最后由 绿叶清舟 于 2023-2-11 20:27 编辑 <br /><br /><style>#papa {
margin: -100px 0 0 calc(50% - 628px);
width: 1100px;
height: 606px;
background: tan url('https://pic.imgdb.cn/item/63e785bc4757feff33dd1ada.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;
left: 785px;
top: 147px;
width: 138px;
height: 138px;
background: ;
box-shadow: inset 0 0 40px hsla(0,0%,100%,.5), 0 -10px 30px hsla(90,100%,70%,.1);
border-radius: 50%;
display: grid;
place-items: center;
}
#mplayer:hover {
cursor: pointer;
box-shadow: inset 0 0 25px hsla(0,0%,100%,.5), 0 -10px 40px hsla(90,100%,50%,.75);
}
.wave {
--delay: 0s;
position: absolute;
width: 80%;
height: 80%;
border: 3px solid #00ffff;
border-radius: 50%;
clip-path: inset(20% 0 20% 0);
animation: fade .3s var(--delay) infinite var(--state);
}
.wave:nth-of-type(2) { --delay: .3s; width: 60%; height: 60%; }
.wave:nth-of-type(3) { --delay: .5s; width: 40%; height: 40%; }
.wave:nth-of-type(4) { --delay: .6s; width: 20%; height: 20%; }
.wave:nth-of-type(5) { --delay: .6s; width: 0%; height: 0%; }
@keyframes fade {
from { opacity: .9; }
to { opacity: 0.2; }
}
</style>
<div id="papa">
<div id="mplayer">
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1324875732.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: green; border: 2px solid snow;',});
})();
</script> 清舟厉害，我进入三体游戏{:4_187:} 接收到了宇宙电波{:4_199:} 清舟速度快的，一眨眼就出来了{:4_189:} 谢谢清舟美贴，么么哒{:4_183:} 你这是宇宙速度啊{:4_170:} 雨中悄然 发表于 2023-2-11 20:51
接收到了宇宙电波
悄然收礼开心{:4_171:} 小辣椒 发表于 2023-2-11 20:52
悄然收礼开心
{:4_205:}好玩好学还可以收礼{:4_170:} 小辣椒 发表于 2023-2-11 20:52
悄然收礼开心
谢谢小辣椒你们把这坛子整得气氛真的很好{:4_187:} 雨中悄然 发表于 2023-2-11 20:54
谢谢小辣椒你们把这坛子整得气氛真的很好
是吗。我也是感觉花潮在黑黑的带动下，学习氛围很好 雨中悄然 发表于 2023-2-11 20:53
好玩好学还可以收礼
开心吧，送礼 收礼的大家一起开心 小辣椒 发表于 2023-2-11 20:55
是吗。我也是感觉花潮在黑黑的带动下，学习氛围很好
第一次感觉线上也不虚{:4_173:} 小辣椒 发表于 2023-2-11 20:56
开心吧，送礼 收礼的大家一起开心
天天开心{:4_170:} 清舟把这个播放器效果放进放大镜里，这个构思太有趣了。制作真漂亮。悄然收礼开心{:4_187:} 这个加壳的，随便悄然怎么摔 作品和题目一样，都很神奇的。 庶民 发表于 2023-2-12 04:58
作品和题目一样，都很神奇的。
谢谢庶民支持 马黑黑 发表于 2023-2-11 21:18
这个加壳的，随便悄然怎么摔
悄然啥时这么暴力了 红影 发表于 2023-2-11 21:13
清舟把这个播放器效果放进放大镜里，这个构思太有趣了。制作真漂亮。悄然收礼开心
外星来的不放大看不清啊{:4_189:} 雨中悄然 发表于 2023-2-11 20:52
你这是宇宙速度啊
宇宙来的必须这速度啊{:4_189:}