时光停止
本帖最后由 马黑黑 于 2023-2-13 19:53 编辑 <br /><br /><style>#papa {
--state: running;
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: #3D255A url('https://638183.freep.cn/638183/t23/webp/timestop.webp') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
position: relative;
z-index: 1;
}
.clock {
position: absolute;
width: 300px;
}
.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: 200px;
top: 100px;
right: 100px;
cursor: pointer;
transform-origin: 66% 0;
animation: swing .8s linear infinite alternate var(--state);
}
@keyframes swing {
to { transform: rotate(-30deg); }
}
</style>
<div id="papa">
<img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
<img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
<img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
<img id="mplayer" class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1992712131.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>
帖子代码
<style>
#papa {
--state: running;
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: #3D255A url('https://638183.freep.cn/638183/t23/webp/timestop.webp') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
position: relative;
z-index: 1;
}
.clock {
position: absolute;
width: 300px;
}
.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: 200px;
top: 100px;
right: 100px;
cursor: pointer;
transform-origin: 66% 0;
animation: swing .8s linear infinite alternate var(--state);
}
@keyframes swing {
to { transform: rotate(-30deg); }
}
</style>
<div id="papa">
<img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
<img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
<img class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
<img id="mplayer" class="clock" src="https://638183.freep.cn/638183/t23/1/timestop.png" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1992712131.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>
醉美水芙蓉 发表于 2023-2-13 20:24
怀表排列错落有致，很别致的播放器！
{:4_190:} 醉美水芙蓉 发表于 2023-2-13 20:23
黑黑老师那个怀表是播放器吗？
{:4_181:} 黑黑今天又一个新的了，昨天的红太阳还没有发的{:4_189:} 有钱有钱{:4_170:} 这个好玩的，套用一个去 不过得先钱拿够{:4_170:} 黑黑这个表做的漂亮，这个我用什么素材呢 去瞎捣鼓一个看看，反正套用一个玩玩{:4_174:} 小辣椒 发表于 2023-2-13 21:09
去瞎捣鼓一个看看，反正套用一个玩玩
这个应该也是简单系列 小辣椒 发表于 2023-2-13 21:06
黑黑今天又一个新的了，昨天的红太阳还没有发的
那可以发了 小辣椒 发表于 2023-2-13 21:08
黑黑这个表做的漂亮，这个我用什么素材呢
想想 小辣椒 发表于 2023-2-13 21:07
有钱有钱
钱钱少不了 马黑黑 发表于 2023-2-13 21:25
这个应该也是简单系列
完成作业了{:4_170:} 马黑黑 发表于 2023-2-13 21:26
想想
哈哈，找了发图就可以了 马黑黑 发表于 2023-2-13 21:26
那可以发了
还没有上传，现在去上传 小辣椒 发表于 2023-2-13 21:35
还没有上传，现在去上传
好