【阿呆】肖战的歌（学习黑师时光停止播放效果）
本帖最后由 雨中悄然 于 2023-2-19 13:27 编辑 <br /><br /><style>
#papa {
--state: running;
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: #3D255A url('https://pic.imgdb.cn/item/63f0e391f144a01007511bab.jpg') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
position: relative;
z-index: 1;
}
.vid { position: absolute; width: 1024px; height: 680px; clip-path: ellipse(30% 20% at 50% 50%) ;top: -55px; right:0px; object-fit: cover; opacity: 0.08; }
.clock {
position: absolute;
width: 50px;
}
.clock:nth-of-type(2) {
transform: translate(100px,40px) scale(0.5) rotate(-15deg);
}
.clock:nth-of-type(3) {
transform: translate(100px,190px) scale(0.8) rotate(30deg);
}
.clock:nth-of-type(4) {
width: 50px;
top: 16%;
left: 25%;
cursor: pointer;
transform-origin: 60% 0;
animation: swing .8s linear infinite alternate var(--state);
}
@keyframes swing {
from { transform: rotate(30deg); }
to { transform: rotate(-30deg); }
}
</style>
<div id="papa">
<img class="clock" src="https://pic.imgdb.cn/item/63f0da0af144a010073b7d10.gif" alt="" />
<img class="clock" src="https://pic.imgdb.cn/item/63f0da0af144a010073b7d10.gif" alt="" />
<img class="clock" src="https://pic.imgdb.cn/item/63f0da0af144a010073b7d10.gif" alt="" />
<img id="mplayer" class="clock" src="https://pic.imgdb.cn/item/63f0da0af144a010073b7d10.gif" alt="" />
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/10/5b514e234656d_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1819986234.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 = () => papa.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: none; border: 2px solid snow; bottom: 20px; left: 50%; transform: translate(-50%);',});
})();
</script> 图中的大圆盘做得很精致啊。 @马黑黑 交份作业 新手上路，我慢慢走啊{:4_170:} 梦油 发表于 2023-2-19 13:08
图中的大圆盘做得很精致啊。
谢谢梦油，刚学到的 悄然这个构思和图图都非常漂亮{:4_199:} 这个铃铛鼠标要点击上去一点，比较细巧，小辣椒鼠标划拉了好几下才找到了小手{:4_189:} 小辣椒 发表于 2023-2-19 13:13
悄然这个构思和图图都非常漂亮
{:4_187:}被小辣椒夸了，乐一下 小辣椒 发表于 2023-2-19 13:14
这个铃铛鼠标要点击上去一点，比较细巧，小辣椒鼠标划拉了好几下才找到了小手
{:4_170:}晃得有点快了 雨中悄然 发表于 2023-2-19 13:16
晃得有点快了
我记得可以修改摆动速度的,问问黑黑就知道了 这个风铃播放器真漂亮，截取的视频也很漂亮。这个帖子真漂亮，悄然真棒{:4_199:} 雨中悄然 发表于 2023-2-19 13:09
@马黑黑 交份作业
100√ 这个画面很美，超喜欢。 欣赏老师的美帖，很有趣。{:4_176:} 雨中悄然 发表于 2023-2-19 13:10
谢谢梦油，刚学到的
学以致用啊。 图图漂亮，就是抓了老半天才抓到{:4_189:} 明白了，视频原因 小辣椒 发表于 2023-2-19 13:24
我记得可以修改摆动速度的,问问黑黑就知道了
嗯嗯，可以调整 红影 发表于 2023-2-19 13:34
这个风铃播放器真漂亮，截取的视频也很漂亮。这个帖子真漂亮，悄然真棒
哈哈，谢谢影子鼓励{:4_173:}乐一个