HTML5+CSS3+JavaScript Web前端开发案例教程课件：微信红包领取动画.pptxVIP

微信红包领取动画

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：微信红包领取动画核心功能：开红包特效红包展示动画

案例介绍微信红包领取动画效果

02技术准备

技术准备技术1：CSS3动画CSS3提供了animation动画属性，该属性的用法类似于transition。CSS3的animation是由三部分组成的，包括：关键帧（keyframes），定义动画在不同阶段的状态；动画属性（properties），决定动画的播放时长、播放次数，以及用何种函数式来播放动画等；CSS属性，决定CSS元素在不同关键帧的状态。

技术准备如果要使用CSS3创建一个动画效果，需要先使用“@keyframes”为动画命名，然后在关键帧对象中以百分比的方式或关键词的方式设置不同帧的动画状态，最后在设置动画播放属性和CSS属性。

技术准备示例代码：.demo{animation:dropdown6slinearinfinite;}@keyframesdropdown{0%{margin-top:0px;}50%{margin-top:-100px;}100%{margin-top:-200px;}}

技术准备技术2：jQuery事件处理jQuery封装了JavaScript的常用事件，方便开发者便捷地绑定这些事件，同时还简化了事件绑定和处理的方法。$(p).click(function(){$(this).hide();});

技术准备jQuery还提供了bind()和on()方法绑定事件。bind()方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数；on()方法添加的事件处理程序适用于当前及未来的元素。$(p).bind(click,function(){alert(这个段落被点击了。);});//或$(p).on(click,function(){alert(这个段落被点击了。);});

03案例实现

案例实现文件结构：