记忆

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: radial-gradient(circle,transparent,rgba(100,10,10,var(--opa))),url('https://638183.freep.cn/638183/t24/jpg/jy.jpeg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --opa: .4; }
   
3. #mplayer { position: absolute; left: 20px; top: 20px; width: 137px; height: 347px; box-sizing: border-box; cursor: pointer; }
   
4. #mplayer::before, #mplayer::after { position: absolute; content: ''; width: 100%; height: 190px; background: url('https://638183.freep.cn/638183/small/clk3.png') no-repeat; }
   
5. #mplayer::after { height: 157px; top: 190px; background-position: 0 -190px; transform-origin: 50% 0; animation: swear .5s linear infinite alternate var(--state); }
   
6. #mplayer:hover { filter: drop-shadow(0 0 60px pink) brightness(1.2); }
   
7. @keyframes swear { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
   
8. </style>
   
9. 
   
10. <div id="papa">
    
11.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=477931" autoplay loop></audio>
    
12.     <div id="mplayer" title="播放/暂停"></div>
    
13. </div>
    
14. 
    
15. <script>
    
16. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
17. aud.addEventListener('pause', () => mState());
    
18. aud.addEventListener('playing', () => mState());
    
19. aud.addEventListener('timeupdate', () => papa.style.setProperty('--opa',Math.random()));
    
20. mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
21. </script>

复制代码

马黑黑

钟摆的摇动：

两个伪元素背景装载同一张图片，第一个伪元素在上部，第二个在下部。第一个伪元素只显示上半部，第二个背景图片的位置上移190像素、执行关键帧动画。

帖子背景的闪烁：

由 audio 控件的 timeupdate 监听事件驱动一个CSS变量值 --opa，该变量作用于径向渐变背景的第二个rgba颜色，就是alpha通道，变量值在 0~1之间随机变换。

渐变背景是顶层背景，图片背景是底层背景。由于顶层背景的第一个颜色透明，底层图片中心绝大部分清晰呈现，又由于第二个颜色有透明度，所以，底层图片四周依稀可辨。

红影

这个挂钟的设计真好，原来是整张图图，分别取上下半截，就能做出动的钟摆了，厉害

红影

呀，我差点抢楼啊，回复完一看，黑黑还有说明楼

红影

这个背景闪烁又是一种方法，而且设置这么简单，太赞了

红影

这个背景闪烁和前面定时器的那个一样，都是不需要加入时间控制的呢。这个比那个动得慢点的感觉。

小辣椒

黑黑这个摆钟还有这个技巧在里面

小辣椒

这个素材也是找的好，黑黑你太有才了

山里人

原来是一张图片分上部分静态，下部分摆动

清茶煮雪

谢谢黑黑老师分享

马黑黑

菲儿 发表于 2024-1-31 17:23
谢谢黑黑老师分享

客气客气

马黑黑

红影 发表于 2024-1-31 14:19
这个挂钟的设计真好，原来是整张图图，分别取上下半截，就能做出动的钟摆了，厉害

这是数学拼接：几何和代数好就行

马黑黑

山里人 发表于 2024-1-31 16:52
原来是一张图片分上部分静态，下部分摆动

对的

马黑黑

红影 发表于 2024-1-31 14:25
呀，我差点抢楼啊，回复完一看，黑黑还有说明楼

没事的，能抢则抢，不抢白不抢

马黑黑

小辣椒 发表于 2024-1-31 15:03
这个素材也是找的好，黑黑你太有才了

不是有才，是有菜

马黑黑

红影 发表于 2024-1-31 14:26
这个背景闪烁又是一种方法，而且设置这么简单，太赞了

利用 timeupdate 事件。但若使用插件，timeupdate事件已经被使用，就得想其他的方法

马黑黑

小辣椒 发表于 2024-1-31 15:03
黑黑这个摆钟还有这个技巧在里面

这实现方法是简单的

马黑黑

醉美水芙蓉 发表于 2024-1-31 21:21
欣赏学习老师教程！