那一季风情 TO：走过岁月贺生辰 （学习黑黑古屋效果）
<style>#papa {
--state: paused;
margin: 120px 0 0 calc(50% - 740px);
display: grid;
place-items: center;
width: 1300px;
height: 750px;
background: lightblue url('https://wx.ttt.dj/updir/640b7c5b4effb.gif') 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: 12%;
top: 10%;
width: 50px;
height: 50px;
background: hsla(20,100%,95%,.25);
border-radius: 50%;
box-shadow:
0 60px 15px 10px hsla(20,100%,20%,.25),
0 130px 15px 15px hsla(20,100%,30%,.25),
0 210px 15px 20px hsla(20,100%,40%,.25),
0 300px 15px 30px hsla(20,100%,50%,.25),
0 400px 15px 40px hsla(20,100%,60%,.25);
transform: rotate(-30deg);
animation: rot 3s ease-in-out infinite alternate var(--state);
cursor: pointer;
}
#mplayer::before {
position: absolute;
content: '';
left: -20px;
width: 80px;
height:480px;
}
@keyframes rot { to { transform: rotate(-40deg); } }
#dt2{ position: absolute; width: 300px; height: 120px; top: 100px; left: 26%; }
#dt3{ position: absolute; width: 450px; height: 230px; top: 110px; left: 30%; }
</style>
<div id="papa">
<img id="dt2" src="https://pic.imgdb.cn/item/640b7d90f144a01007d08c14.png" alt="" style="position: absolute; mix-blend-mode: multiply; transform: translate(30px, 30px) rotate(360deg); " />
<img id="dt3" src="https://pic.imgdb.cn/item/64048760f144a01007aa657c.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: translate(30px, 30px) rotate(360deg); " />
<div id="mplayer"></div>
<div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://wx.ttt.dj/updir/640b7cb39386e.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> 玩一次岁月那一季风情的粒子效果
祝岁月生日快乐~~{:4_177:}
@走过岁月 看见图图中间加了一颗星星吗 小辣椒真挚的祝福就在这颗星里面表达了{:4_170:} 感谢这么多年来岁月的包容，小辣椒一直玩你的东东，从H5开始几年下来，小辣椒玩的好开心{:4_172:} 谢谢黑黑的教程分享，小辣椒套用一个@马黑黑 音画都是美美哒 岁月生日快乐{:4_171:} 帖美歌好听，岁月收礼开心{:4_187:} 那若隐若现的“糖葫芦”挺有意思的。
同祝岁月生日快乐。 这一季与岁月干杯{:4_176:} 亲爱的好快了，岁月的效果这么快就做好了{:4_187:} 岁月生日了？是哪天啊？同祝岁月生日快乐{:4_187:} 这个效果太漂亮了，音乐也是岁月喜欢的 青春与我们一起走过。 借小辣椒美贴同祝岁月生日快乐！ 小辣椒 发表于 2023-3-5 16:30
玩一次岁月那一季风情的粒子效果
祝岁月生日快乐~~
来了，我的礼物 小辣椒 发表于 2023-3-5 16:32
看见图图中间加了一颗星星吗 小辣椒真挚的祝福就在这颗星里面表达了
看到，小辣椒有心了 小辣椒 发表于 2023-3-5 16:35
感谢这么多年来岁月的包容，小辣椒一直玩你的东东，从H5开始几年下来，小辣椒玩的好开心
不客气，开心就好 辫子哥哥 发表于 2023-3-5 17:04
岁月生日快乐
谢谢辫子哥