帖子实现机制的简单解释：


帖子HTML结构很简单：父元素（即帖子外框id="papa" 的 div）之内带一个可视元素（心形播放器，id="mplayer" 的 div）和一个没有可视界面的音频元素(id="aud" 的 audio）。


这些HTML元素，由前面的 CSS 代码制定了它们的样式（01-37行）。其中：


① 帖子呈现出来的图片为父元素的背景图片（06行）。


② 心形播放器用一个div做成，它带两个伪元素，div元素和其两个伪元素共同构成心形，再旋转一定角度令其变为帖子所展示出来的样子（11-34行）。


③ 心形播放器鼠标移动交互：用伪类 :hover 实现，鼠标指针移到心形图案是心形变色（35行）。


④ CSS关键帧动画：心脏跳动（36行），使用 transform 2的变换的 scale 即伸缩变化模拟心脏跳动，然后在 #mplayer ID选择器通过 animation 属性调用（21行），每 0.45秒 调用一次，反复、往复运行，且依据 CSS变量 --state 决定是否运行。


CSS不能完成大量的交互操作，因此，必须借助JS来实现主要交互功能：


⑤ 变量 --state 的赋值通过 JS 的 mState 函数（46行）动态赋予，它依据音频播放器 audio （ID为 aud）的暂停/播放状态分别赋予 paused 或 running 两个值，即暂停或运行关键帧动画。


⑥ JS代码中，通过监听 #aud 音频播放器的播放与暂停状态来控制心形按钮的跳动，监听到了这两个状态，都运行 mState 函数（47、48行）。


⑦ 同时监听 mplayer 心形按钮的单击事件以决定是播放还是暂停音乐（49行）。

前一篇: 古屋
下一篇: 爱的命运