请大神分析一下该页面涉及动效的部分，\nhttp://www.apple.com/music/\n
谢邀， 首次接到邀请，留个坑，耐心答下\u0026lt;(￣ˇ￣)/首先，苹果公司已经彻底抛弃旧版本浏览器了， 该页面不止使用大量HTML5新标签，主要效果还是由css3 新样式完成，甚至脚本代码都已放弃兼容低版本IE（接下来深入脚本代码详述）。\u0026lt;header\u0026gt; \u0026lt;nav\u0026gt; \u0026lt;section\u0026gt;\u0026lt;footer\u0026gt; 这类HTML5语义化标签完全使用，在低版本浏览没多大影响。 【请大神分析一下该页面涉及动效的部分，\nhttp://www.apple.com/music/\n】 
但是css3样式作为主要实现，在国内网站就比较少见了，所以，其页面在IE8下跑是这样的：
连attachEvent兼容代码都不愿写了：
主要页面内容都在\u0026lt;main\u0026gt;标签内，有10个内容块（\u0026lt;section\u0026gt;），其中前面9个有动画效果；
今天时间有限，先探讨第一个\u0026lt;section\u0026gt;的动画效果吧：第一部分的实现主要用了：html5的\u0026lt;video\u0026gt;标签播放视频 + css3 的transform(转换) opacity(透明)（以上技术点IE9+才支持） 以及 -webkit-filter（css3 filter, 非IE滤镜，所有IE都不支持）
简单说下实现原理（没深入脚本代码）：监听滚轮事件，鼠标滚轮往下时候：1.视频背景会模糊（非IE下）由 -webkit-filter实现， javascript递增模糊取值 blur(12.7530839813375px)实现越往下滚，越模糊的效果；2.“Free, three-month trial of Apple Music now available.”跟“All the ways you love music...... ”文字由3d transform(转换) + opacity(透明)实现渐进消失， 这部分明显也是javascript代码改变 以上两样式实现；3.当视频播放完后会定格在最后一帧，然后如果鼠标滚回第一块内容处，视频会重新播放，javascriopt触发视频播放按钮实现。参考资料：CSS3 Filter的十种特效Can I use... Support tables for HTML5, CSS3, etcHTML \u0026lt;video\u0026gt; 标签
■网友
Canvas.
推荐阅读
- 建议|育婴师给出这几点建议，来了解一下小孩发烧咳嗽怎么办
- |新款领克01竞争力分析：推荐入门版 价格门槛提高2.9万元
- 联想g50-80咋样大概4000元左右，性价比怎样求大神指点！
- 车祸违驾|为什么交警在查车时，会用手摸一下车尾，你知道是什么意思吗？
- 有哪些做短视频的自媒体推荐
- 想买个30w—50w的轿车，外形优雅精致，气质沉静内敛。要能够顾家，稳定，安全性能好。请帮忙推荐一下
- 汽车扒一扒|有谣言说国内的雷克萨斯配置低，我澄清一下，这不是谣言
- 怎样防止U盘内的文件被复制
- 汽车知识|广汽丰田旗下全新TNGA中型SUV“威兰达”，还不来了解一下
- 卫星云图中这种图像是啥情况