评论资讯 [ 总 861 则 ]
·mark - 2024-9-7 23:56
·悄然 - 2024-9-2 21:52
·马黑 - 2024-9-2 20:57
·马黑 - 2024-9-1 23:17
·飞飞 - 2024-8-28 18:42
·马黑 - 2024-8-28 18:39
·马黑 - 2024-8-26 19:22
·马黑 - 2024-8-26 08:24
·飞飞 - 2024-8-20 08:51
·马黑 - 2024-8-19 23:56
·悄然 - 2024-9-2 21:52
·马黑 - 2024-9-2 20:57
·马黑 - 2024-9-1 23:17
·飞飞 - 2024-8-28 18:42
·马黑 - 2024-8-28 18:39
·马黑 - 2024-8-26 19:22
·马黑 - 2024-8-26 08:24
·飞飞 - 2024-8-20 08:51
·马黑 - 2024-8-19 23:56
友情链接
网站统计
《爱的命运》说明
帖子实现机制的简单解释:
帖子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行)。
帖子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行)。
发表评论:
评论列表 [0条]