古屋
<style>#papa {
--state: paused;
margin: -80px 0 0 calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/webp/guwu.webp') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
user-select: none;
position: relative;
z-index: 1;
}
#btnFs {
position: absolute;
bottom: 20px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid green;
color: lightgreen;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
#mplayer {
position: absolute;
left: 36%;
top: 0;
width: 50px;
height: 50px;
background: hsla(120,100%,95%,.25);
border-radius: 50%;
box-shadow:
0 60px 20px 10px hsla(120,100%,50%,.45),
0 140px 20px 20px hsla(120,100%,60%,.45),
0 240px 20px 30px hsla(120,100%,70%,.45),
0 360px 20px 40px hsla(120,100%,80%,.45),
0 500px 20px 50px hsla(120,100%,90%,.45);
transform: rotate(-30deg);
animation: rot 3s ease-in-out infinite alternate var(--state);
cursor: pointer;
}
#mplayer::before {
position: absolute;
content: '';
left: -20px;
width: 100px;
height:580px;
}
@keyframes rot { to { transform: rotate(-40deg); } }
</style>
<div id="papa">
<div id="mplayer"></div>
<div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2027168041.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let fs = false, timerId;
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('ended', () => playNext());
papa.addEventListener('mousemove', (e) => {
clearTimeout(timerId);
btnFs.style.display = 'block';
timerId = setTimeout('btnFs.style.display = "none"', 3000);
});
btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>
代码
<style>
#papa {
--state: paused;
margin: -80px 0 0 calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/webp/guwu.webp') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
user-select: none;
position: relative;
z-index: 1;
}
#btnFs {
position: absolute;
bottom: 20px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid green;
color: lightgreen;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
#mplayer {
position: absolute;
left: 36%;
top: 0;
width: 50px;
height: 50px;
background: hsla(120,100%,95%,.25);
border-radius: 50%;
box-shadow:
0 60px 20px 10px hsla(120,100%,50%,.45),
0 140px 20px 20px hsla(120,100%,60%,.45),
0 240px 20px 30px hsla(120,100%,70%,.45),
0 360px 20px 40px hsla(120,100%,80%,.45),
0 500px 20px 50px hsla(120,100%,90%,.45);
transform: rotate(-30deg);
animation: rot 3s ease-in-out infinite alternate var(--state);
cursor: pointer;
}
#mplayer::before {
position: absolute;
content: '';
left: -20px;
width: 100px;
height:580px;
}
@keyframes rot { to { transform: rotate(-40deg); } }
</style>
<div id="papa">
<div id="mplayer"></div>
<div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2027168041.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let fs = false, timerId;
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('ended', () => playNext());
papa.addEventListener('mousemove', (e) => {
clearTimeout(timerId);
btnFs.style.display = 'block';
timerId = setTimeout('btnFs.style.display = "none"', 3000);
});
btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>
沙发？ 这个老屋真的老的，看起来有千把年了 看看旁边的树根千年都不止 真的好古老的。 庶民 发表于 2023-3-4 16:47
真的好古老的。
太古老了 辫子哥哥 发表于 2023-3-4 16:31
沙发？
硬板凳{:4_170:} 辫子哥哥 发表于 2023-3-4 16:33
看看旁边的树根千年都不止
三千年 马黑黑 发表于 2023-3-4 17:11
硬板凳
需要扶贫？ 马黑黑 发表于 2023-3-4 17:11
三千年
确实古老了，稀有珍宝了 照到屋顶，很有意境，欣赏点赞！{:4_190:} 醉美水芙蓉 发表于 2023-3-4 17:48
千年古树！
屋子也老 辫子哥哥 发表于 2023-3-4 17:17
确实古老了，稀有珍宝了
韩国人已帮申遗了 辫子哥哥 发表于 2023-3-4 17:16
需要扶贫？
没到那地步 梦缘 发表于 2023-3-4 17:24
照到屋顶，很有意境，欣赏点赞！
感谢临帖支持 一道道藍光射来，把古屋里妖精吓尿了{:4_173:} 樵歌 发表于 2023-3-4 18:43
一道道藍光射来，把古屋里妖精吓尿了
妖精尿贵比黄金，快去收集{:4_170:} 诡异的古屋和大树，光圈播放器很漂亮{:4_187:}