骑骆驼 过沙漠 - 吴欣叡 TO：小辣椒 闲言不语
<style>
#papa {
left: -340px;
top: 130px;
width: 1280px;
height: 850px;
background: gray url('https://pic.imgdb.cn/item/63e67df74757feff33354f9c.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
--state: paused;
position: absolute;
width: 250px;
height: 250px;
left: 12%;
top: 15%;
border-radius: 50%;
background: Gold;
box-shadow: inset 0 0 60px hsla(150,50%,0%,.5);
transform: rotate(45deg);
cursor: pointer;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
border: 4px solid green;
clip-path: inset(90% 0% 0% 0%);
animation: clip 8s infinite linear;
animation-play-state: var(--state);
}
#mplayer::after {
animation-delay: -4s;
}
@keyframes clip {
25% { clip-path: inset(0% 0% 0% 90%); border-color: green; }
50% { clip-path: inset(0% 0% 90% 0%); border-color: lightgreen; }
75% { clip-path: inset(0% 90% 0% 0%); border-color: pink; }
100% { clip-path: inset(90% 0% 0% 0%); border-color: darkgreen; }
}
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1433736985.mp3" 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 ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
mplayer.addEventListener('click', () => {
aud.paused ? aud.play() : aud.pause();
});
FS({
pa: papa,
set: 'color: snow; background:#bd5f2b; border: 2px solid snow; left: 50%; bottom: 100px;',
});
})();
</script>
<br><br><br><br><br><br><br><br> 首先谢谢马老师的源码
@马黑黑
@小辣椒
谢谢小辣椒指导{:4_197:} @闲言不语
谢谢不语老师带路旅行{:4_170:} 才忙玩，吃饭去了 冬雨兄一来就精彩连连 这个好，不用插件，电脑，手机都能看 欣赏老师佳作,抱歉,没分了! 牵那么多骆驼，俺有那么富有吗，俺带路只牵小毛驴，还是向隔壁老王借的。{:4_397:} 服务不周，还望两位见谅{:4_189:} 前面有片林子，去歇息一下，那啥，把导游费交了吧先。{:4_397:} 冬天的雨 发表于 2023-2-11 13:08
首先谢谢马老师的源码
@马黑黑
谢谢冬雨的礼物，还客气啊{:4_187:} 走过岁月 发表于 2023-2-11 13:13
冬雨兄一来就精彩连连
冬雨是套用黑黑老师的代码的{:4_189:} 闲言不语 发表于 2023-2-11 14:32
牵那么多骆驼，俺有那么富有吗，俺带路只牵小毛驴，还是向隔壁老王借的。
哈哈，梦梦是导游啊{:4_170:} 小辣椒 发表于 2023-2-11 15:14
冬雨是套用黑黑老师的代码的
不错，很精彩 走过岁月 发表于 2023-2-11 15:16
不错，很精彩
岁月的那礼物我太喜欢了 小辣椒 发表于 2023-2-11 15:17
岁月的那礼物我太喜欢了
喜欢有空继续送 走过岁月 发表于 2023-2-11 15:16
不错，很精彩
黑黑的代码做的播放器手机可以欣赏，所以我也是特别喜欢 走过岁月 发表于 2023-2-11 15:18
喜欢有空继续送
太忙就别做了，你也是看不见人的 小辣椒 发表于 2023-2-11 15:22
黑黑的代码做的播放器手机可以欣赏，所以我也是特别喜欢
是的，很方便，何时何地都可以欣赏 走过岁月 发表于 2023-2-11 15:23
是的，很方便，何时何地都可以欣赏
主要没有上传空间也是可以玩