【孤独的旅程】学习黑师 遗世独立 播放器效果
本帖最后由 雨中悄然 于 2023-2-11 23:17 编辑 <br /><br /><style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: teal url('https://pic.imgdb.cn/item/63e61ad74757feff3341117a.jpg') no-repeat center/cover;
box-shadow: 8px 6px 18px rgba(0,0,0,.35);
border-radius: 8px;
position: relative;
z-index: 1;
}
#mplayer {
--state: paused;
--angle: 360deg;
width: 100px;
height: 100px;
top: 135px;
right: 125px;
background: url('https://pic.imgdb.cn/item/63e60aeb4757feff3316c081.jpg') no-repeat center/cover;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
position: absolute;
}
#circle {
position: absolute;
top: -6px; left: -6px; bottom:-6px; right: -6px;
border: 4px dotted #fff;
border-radius: 50%;
display: grid;
place-items: center;
animation: rot infinite 10s linear;
animation-play-state: var(--state);
}
#circle::before, #circle::after {
position: absolute;
content: '';
top: -12px; left: -12px; bottom:-12px; right: -12px;
border: 4px dotted #fff;
border-radius: 50%;
animation: rot infinite 5s linear;
animation-play-state: var(--state);
--angle: -360deg;
}
#circle::after {
top: -20px; left: -20px; bottom:-20px; right: -20px;
border-color: #ddd;
animation-duration: 12s;
--angle: 360deg;
}
@keyframes rot {
from { transform: rotate(0); }
to { transform: rotate(var(--angle)); }
}
</style>
<div id="papa">
<div id="mplayer">
<span id="circle"></span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1984299967.mp3" autoplay loop></audio>
<script>
(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: transparent; border: 2px solid snow; top: 85%;right:10%;',
});
</script> 红影 发表于 2023-2-11 21:29
今天的那个又觉得特别美，悄然太棒了
{:4_170:}下午才说说我们这个坛子实在是氛围好，主要是特别开心 @马黑黑 交份作业先 本帖最后由 雨中悄然 于 2023-2-10 19:38 编辑
下午突然看到这张图，觉得挺好看，合了黑老师遗世独立的主题，就折腾出个图片。
虽然生命是孤独的旅程，但在这里有老师坛友们在，还是很开心快乐滴。
作业完成，PS过程中也学到一 些东西。
接下来找时间啃代码
等我一点点进步{:4_170:}
《孤勇者》很喜欢的一首歌{:4_187:} 意境悠远，悄然的制作好漂亮。有我们大家陪在你身边，生命不会是孤独的旅程{:4_173:} 雨中悄然 发表于 2023-2-10 18:26
@马黑黑 交份作业先
好漂酿 红影 发表于 2023-2-10 19:09
《孤勇者》很喜欢的一首歌
{:4_173:}为了配图，匆忙中只想到这个歌 红影 发表于 2023-2-10 19:10
意境悠远，悄然的制作好漂亮。有我们大家陪在你身边，生命不会是孤独的旅程
{:4_170:}为做贴子强孤独，字为了配图 马黑黑 发表于 2023-2-10 19:14
好漂酿
{:4_173:}谢谢老师夸奖 红影 发表于 2023-2-10 19:10
意境悠远，悄然的制作好漂亮。有我们大家陪在你身边，生命不会是孤独的旅程
有大家真好，开心着呢 雨中悄然 发表于 2023-2-10 19:19
为了配图，匆忙中只想到这个歌
全屏也漂亮，好喜欢这样清爽的画面{:4_187:} 雨中悄然 发表于 2023-2-10 19:21
为做贴子强孤独，字为了配图
你性格这么好，孤独啥啊，想孤独都孤独不了{:4_170:} 雨中悄然 发表于 2023-2-10 19:21
有大家真好，开心着呢
这帖子不知道怎么，觉得带点禅境的意味。 红影 发表于 2023-2-10 19:38
全屏也漂亮，好喜欢这样清爽的画面
{:4_204:}你能喜欢太好了 红影 发表于 2023-2-10 19:38
你性格这么好，孤独啥啊，想孤独都孤独不了
嗯嗯，这事儿没必要 雨中悄然 发表于 2023-2-10 19:42
你能喜欢太好了
不知道为什么，你做的帖子都很喜欢，可能因为我们兴趣相近的缘故{:4_173:} 红影 发表于 2023-2-10 19:39
这帖子不知道怎么，觉得带点禅境的意味。
我不知道，我再爬上去看看{:4_170:} 雨中悄然 发表于 2023-2-10 19:43
嗯嗯，这事儿没必要
真孤独了，也肯定被抓出来一起热闹了{:4_189:} 很大气的感觉 雨中悄然 发表于 2023-2-10 19:21
谢谢老师夸奖
不客气，应该的