幽灵（有心脏病的莫点）
<style>#papa {
--state: paused;
--s1: 0.8; --s2: 1.6;
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/ykzi.webp') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
user-select: none;
position: relative;
z-index: 1;
}
#papa:fullscreen { --s1: 1; --s2: 2; }
#papa:fullscreen .ball { width: 20px; height: 20px; }
#mplayer {
position: absolute;
width: 140px;
height: 140px;
display: grid;
place-items: center;
cursor: pointer;
animation: change 18s linear infinite alternate var(--state);
}
.ball {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
box-shadow: -5px 0 10px hsla(0,0%,0%,.42) inset;
}
.mypic {
position: absolute;
mix-blend-mode: lighten;
filter: opacity(.8) blur(.5px);
transform: translate(40px) rotate(-45deg);
}
#btnFs {
position: absolute;
bottom: 20px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid snow;
color: snow;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
@keyframes flash { to { box-shadow: 0 0 100px 60px hsla(120, 100%,50%, .2), -2px -2px 8px snow inset; } }
@keyframes change {
from { transform: perspective(2000px) rotateX(-15deg) rotateY(-30deg) rotateZ(0) scale(var(--s1)) translateZ(-360px); }
to { transform: perspective(2000px) rotateX(15deg) rotateY(30deg) rotateZ(3turn) scale(var(--s2)) translateZ(360px); }
}
</style>
<div id="papa">
<img class="mypic" src="https://638183.freep.cn/638183/t23/webp/siji.webp" alt="" />
<div id="mplayer"></div>
<div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1889613642.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let total = 18, fs = false, timerId;
for(let i = 0; i < total; i ++) {
let ball = document.createElement('span');
ball.className = 'ball';
ball.style.cssText += `
background: #${Math.random().toString(16).substr(-6)};
transform: rotate(${360/total*i}deg) translate(70px);
animation: flash ${Math.random()+0.1}s infinite alternate var(--state);
`;
mplayer.appendChild(ball);
}
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());
aud.addEventListener('error', () => {
if(aud.error.code === 4) aud.src = 'http://www.kumeiwp.com/sub/filestores/2023/03/02/b1b4ccfdf191a81ec89091bc226d0202.mp3';
});
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>
好奇者慎点{:5_106:} 图、画一起构成了汗毛倒竖的效果。 音乐的前奏部分很阴森，主旋律还是挺欢快的啊。
幽灵跑到卖香瓜的小贩家了？看到了地上的香瓜{:4_170:} 还以为地上有一张纸，看了一下链接，原来是美女图片。那只黑手要抓图片么{:4_173:} 那魔鬼托着一颗美女头，音乐也有点今人毛骨悚然，
但是，把香瓜换成人头如何{:4_173:} 有一点恐怖的。 起个网名好难 发表于 2023-3-2 13:20
好奇者慎点
音乐有点恐怖{:5_117:} 梦油 发表于 2023-3-2 14:20
图、画一起构成了汗毛倒竖的效果。
没事吧{:5_106:} 红影 发表于 2023-3-2 15:08
音乐的前奏部分很阴森，主旋律还是挺欢快的啊。
幽灵跑到卖香瓜的小贩家了？看到了地上的香瓜
{:5_106:} 红影 发表于 2023-3-2 15:21
还以为地上有一张纸，看了一下链接，原来是美女图片。那只黑手要抓图片么
难道不是从后腰将黑手伸了进去吗{:5_117:} 樵歌 发表于 2023-3-2 17:08
那魔鬼托着一颗美女头，音乐也有点今人毛骨悚然，
但是，把香瓜换成人头如何
香瓜换人头太恐怖了，还是香瓜好{:5_117:} 庶民 发表于 2023-3-2 17:21
有一点恐怖的。
是的，不过还好 马黑黑 发表于 2023-3-2 17:43
没事吧
没叫“120”.{:4_189:} 马黑黑 发表于 2023-3-2 17:44
难道不是从后腰将黑手伸了进去吗
原来这才是恐怖的点，开始都没看出来{:4_173:} 红影 发表于 2023-3-2 20:21
原来这才是恐怖的点，开始都没看出来
不细看看不出 梦油 发表于 2023-3-2 20:06
没叫“120”.
{:5_106:} 醉美水芙蓉 发表于 2023-3-2 19:42
开始有点恐怖！后面没有感觉了！
麻木了{:5_106:} 这是一个乱跑的小播{:4_187:}