这是我见过最牛CSS3特效讲解的文章

如何看待百家号小程序热议话题「这是我见过最牛CSS3特效讲解的文章」
CSS3是什么CSS即层叠样式表（CascadingStyleSheet），主要用于页面的UI美观，例如布局、字体、颜色、背景等。如果你使用过旧版本的CSS，那么对于CSS3页不会太陌生，只是它的升级版本。为什么诞生CSS3动画在PC互联网时代，估计很多玩JavaScript的小伙伴刚学之时，是因为它的酷炫效果把你吸引了。但，移动互联网时代到来之后，JavaScript的性能似乎在移动设备上发挥不到极致，而且还会产生一些细节问题。才这样的情景之下，CSS3动画就登上技术历史舞台了，它不但在支持HTML5的设备上节省性能开支，还有很好的兼容性，可以替代很多老旧的技术（Flash动画、Gif图、JavaScript动画等）。CSS3动画入门CSS3动画的运行构成主要包含：动画声明引用运行主要用于告诉支持CSS3动画的宿主环境（浏览器）我要开辟一块动画范式，构成如下：@keyframes动画名称{样式渐变关键帧序列}说明：@keyframes，声明动画的关键字动画名称，用于标识动画，方便引用运行样式渐变关键帧序列，用样式描述对象在不同的阶段所展示的状态，中间部分一般有宿主内部处理代码示例：@keyframesdemoAnimate{from{background:yellow;}to{background:green;}讲解：动画的过渡节奏，主要用“from”开始动画，“to”结束动画，也可以使用“0%”到“100%”的方式，建议使用百分比的方式，对浏览器更加友好。声明完动画之后，就可以使用“animation”引用到指定的dom，引用的语法如下：animation:animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;这些属性的具体用法如下图：图示太小，点击放大观看.aniOne{animation:demoAnimate2s;demoAnimate表示引用的动画声明名称2s表示动画的运行时间为了让以上的代码运行，咱们创建一个div样式与div，代码如下：/*CSS的div样式*/div{width:200px;height:200px;text-align:center;line-height:200px;color:ffffff;background:green;position:relative;margin-top:1px;<!--html的div节点--><divclass="aniOne">CSS3颜色渐变</div>目前，并不是所有浏览器都支持CSS3动画，在此为大家贴出用于检测CSS3动画支持的代码：图示太小，请点击查看保持动画结束状态估计大家都已经注意到，在CSS3动画结束之后，并不能保持动画的最后状态。例如，一个div默认是红色，动画效果是红色至绿色，但是动画效果播放完毕之后，div又变回红色了，而不是绿色。那么，如何保持动画结束之后的状态呢？在“animation”引用属性中，有一个属性“animation-fill-mode”用于规定动画之前与结束之后保留的状态模式，详细如下图：其中，“forwards”是主要起作用的属性，将上边的示例代码变更之后如下：animation:demoAnimate2sease1forwards;CSS3动画事件在产品开发中，会遇到一些业务场景，需要CSS3动画开始、结束、复方的时候，能够与JavaScript结合，处理一些程序逻辑。在最新的ＨＴＭＬ５中为JavaScript新增加了CSS3动画事件类型，用于监测CSS3动画的执行状态。animationend事件在CSS动画完成后触发，主要如下：animationstart动画开始后触发animationiteration动画重复播放时触发animationend动画完成后触发提示，webkit内核的浏览器可以加前缀“webkit”，例如“webkitAnimationEnd”。在以上的HTML节点的元素上增加id“animationendDiv”，代码如下：<divclass="aniOne"id="animationendDiv">CSS3颜色渐变</div>增加JavaScript如下：请注意，支持此事件的浏览器版本如下：到目前为止，我们讲解了：CSS3动画的基本用法CSS3动画的状态保持CSS3动画如何与JavaScript结合处理业务逻辑剩下的一些其它属于就比较好理解了，等着你自己去探索。时间仓促，欢迎指点留言！！！
该话题由百家号作者Dapeng的车「简介:科技大事件共享。」整理发布。
更多有关这是我见过最牛CSS3特效讲解的文章的讨论请扫码关注百家号小程序签约作者「Dapeng的车」