小辣椒 发表于 2024-2-1 19:36

提前祝大家新年快乐！（学习黑黑记忆效果）

<style>
#papa { margin: 150px 0 0 calc(50% - 803px); width: 1440px; height: 800px; background: radial-gradient(circle,transparent,rgba(100,10,10,var(--opa))),url('https://xlaj.cn/assets/file/zp/20240201192504.jpg ') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --opa: .4; }
#mplayer { position: absolute; left: 600px; top: 140px; width: 258px; height: 350px; box-sizing: border-box; cursor: pointer; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; width: 100%; height: 230px; background: url('https://xlaj.cn/assets/file/zp/20240201192420.png') no-repeat; }
#mplayer::after { height: 280px; top: 210px; background-position: 0 -210px; transform-origin: 50% 0; animation: swear .5s linear infinite alternate var(--state); }
#mplayer:hover { filter: drop-shadow(0 0 60px pink) brightness(1.2); }
@keyframes swear { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

#dt2{ position: absolute; width:200px; height: 240px; top: 100px; left: 884px; }
#dt3{ position: absolute; width: 200px; height: 240px; top:100px; left: 280px; }
#dt4{ position: absolute; width: 273px; height: 72px; top: 60px; left: 580px; }

</style>

<div id="papa">

<img id="dt2" src="https://xlaj.cn/assets/file/zp/20240201192551.gif" alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20240201192551.gif" alt="" />
<img id="dt4" src="https://xlaj.cn/assets/file/zp/20240201192525.gif" alt="" />

    <audio id="aud" src="https://mp3.wf/3m/ttle.mp3" autoplay loop></audio>
    <div id="mplayer" title="播放/暂停"></div>
</div>

<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
aud.addEventListener('timeupdate', () => papa.style.setProperty('--opa',Math.random()));
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br>

小辣椒 发表于 2024-2-1 19:37

@马黑黑

谢谢黑黑的教程分享，学习套用一个

小辣椒 发表于 2024-2-1 19:38

提前祝花潮论坛的朋友们新年快乐！

马黑黑 发表于 2024-2-1 19:38

红红火火过新年！

小辣椒 发表于 2024-2-1 19:55

马黑黑 发表于 2024-2-1 19:38
红红火火过新年！

黑黑晚上好，图图做的太简单了一点，不够漂亮的

马黑黑 发表于 2024-2-1 19:58

小辣椒 发表于 2024-2-1 19:55
黑黑晚上好，图图做的太简单了一点，不够漂亮的

非常漂亮的

醉美水芙蓉 发表于 2024-2-1 19:58

小辣椒 发表于 2024-2-1 20:00

马黑黑 发表于 2024-2-1 19:58
非常漂亮的

知道黑黑是鼓励小辣椒的，我想赶晚上发帖，就这样算了

马黑黑 发表于 2024-2-1 20:01

小辣椒 发表于 2024-2-1 20:00
知道黑黑是鼓励小辣椒的，我想赶晚上发帖，就这样算了

确实很漂亮

红影 发表于 2024-2-1 20:50

很漂亮热闹的贺帖。欣赏亲爱的好帖，借帖同祝每一位朋友新春快乐{:4_177:}

亦是金 发表于 2024-2-1 20:51

问好小辣椒！帖子红火喜庆，欣赏学习了！{:4_187:}

红影 发表于 2024-2-1 20:51

这摆动着灯穗的灯笼真漂亮{:4_187:}

梦油 发表于 2024-2-1 21:21

祝小辣椒朋友新年快乐！祝朋友们新春吉祥！

世外桃源 发表于 2024-2-2 12:15

喜庆的场景，节日气氛出来了{:4_199:}
页: [1]
查看完整版本: 提前祝大家新年快乐！（学习黑黑记忆效果）