记忆
<style>#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; }
#mplayer { position: absolute; left: 20px; top: 20px; width: 137px; height: 347px; box-sizing: border-box; cursor: pointer; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; width: 100%; height: 190px; background: url('https://638183.freep.cn/638183/small/clk3.png') no-repeat; }
#mplayer::after { height: 157px; top: 190px; background-position: 0 -190px; 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); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=477931" 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>
帖子代码
<style>
#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; }
#mplayer { position: absolute; left: 20px; top: 20px; width: 137px; height: 347px; box-sizing: border-box; cursor: pointer; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; width: 100%; height: 190px; background: url('https://638183.freep.cn/638183/small/clk3.png') no-repeat; }
#mplayer::after { height: 157px; top: 190px; background-position: 0 -190px; 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); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=477931" 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>
本帖最后由 马黑黑 于 2024-1-31 14:20 编辑
钟摆的摇动：
两个伪元素背景装载同一张图片，第一个伪元素在上部，第二个在下部。第一个伪元素只显示上半部，第二个背景图片的位置上移190像素、执行关键帧动画。
帖子背景的闪烁：
由 audio 控件的 timeupdate 监听事件驱动一个CSS变量值 --opa，该变量作用于径向渐变背景的第二个rgba颜色，就是alpha通道，变量值在 0~1之间随机变换。
渐变背景是顶层背景，图片背景是底层背景。由于顶层背景的第一个颜色透明，底层图片中心绝大部分清晰呈现，又由于第二个颜色有透明度，所以，底层图片四周依稀可辨。 这个挂钟的设计真好，原来是整张图图，分别取上下半截，就能做出动的钟摆了，厉害{:4_199:} 呀，我差点抢楼啊，回复完一看，黑黑还有说明楼{:4_173:} 这个背景闪烁又是一种方法，而且设置这么简单，太赞了{:4_199:} 这个背景闪烁和前面定时器的那个一样，都是不需要加入时间控制的呢。这个比那个动得慢点的感觉。 黑黑这个摆钟还有这个技巧在里面{:4_199:} 这个素材也是找的好，黑黑你太有才了 原来是一张图片分上部分静态，下部分摆动 谢谢黑黑老师分享{:4_190:} 菲儿 发表于 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
这个素材也是找的好，黑黑你太有才了
不是有才，是有菜{:4_170:} 红影 发表于 2024-1-31 14:26
这个背景闪烁又是一种方法，而且设置这么简单，太赞了
利用 timeupdate 事件。但若使用插件，timeupdate事件已经被使用，就得想其他的方法 小辣椒 发表于 2024-1-31 15:03
黑黑这个摆钟还有这个技巧在里面
这实现方法是简单的 醉美水芙蓉 发表于 2024-1-31 21:21
欣赏学习老师教程！
{:4_190:}