欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,比如旋转、倾斜、位移等,translate是transform里面的属性,用于2D/3D位移。后2个主要对动作进行描述,动画时间、速度曲线、次数等。
3分钟弄明白基础的CSS3动画
3分钟弄明白基础的CSS3动画
如何快速上手基础的CSS3动画
下面我用是一些简单的示例,让大家快速的入门上手:
3分钟弄明白基础的CSS3动画
3分钟弄明白基础的CSS3动画
如何快速上手基础的CSS3动画
这里hover事件时改变宽度和背景颜色,用transition来描述动画,由于我们只对width进行了描述,所以背景色,鼠标指上去,会立马变色,并不会有渐变的过程。
这里为什么用transition而不用animation?那就要说说他们直接的区别了。
transition需要触发一个事件, 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。transition属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本,是给普通做简单网页特效用的。
现在明白了吧,因为我们用的hover事件,所以要用transition。
下面请看第二个例子
3分钟弄明白基础的CSS3动画
3分钟弄明白基础的CSS3动画
如何快速上手基础的CSS3动画
这里动画从加载就开始执行,所以用了animation,改变宽度和背景色,用时1s,并且无限次循环执行。@keyframes规则是创建动画。 -webkit-(chrome/safari), -ms-(ie) 或 -moz-(firefox) 用于兼容不同浏览器。
3分钟弄明白基础的CSS3动画
3分钟弄明白基础的CSS3动画
如何快速上手基础的CSS3动画
transform:rotate使其div元素2D旋转20°.当然你可以设置transform:rotateY, Y 轴的 3D 旋转。
3分钟弄明白基础的CSS3动画
3分钟弄明白基础的CSS3动画
如何快速上手基础的CSS3动画
你还可以设置transform: translate,进行2D,3D位移;
3分钟弄明白基础的CSS3动画
3分钟弄明白基础的CSS3动画
如何快速上手基础的CSS3动画
transform: scale,进行2D,3D缩放;
3分钟弄明白基础的CSS3动画
3分钟弄明白基础的CSS3动画
如何快速上手基础的CSS3动画
transform: skew,进行2D倾斜等等。
3分钟弄明白基础的CSS3动画
3分钟弄明白基础的CSS3动画
如何快速上手基础的CSS3动画
好的动画效果,第一要素是:好的想法,有创意,才有好的成品;第二要素是:有好的实现解题思路,当有设计后,制作就需要想办法实现效果,剥茧抽丝,一步一步来;第三要素:不畏惧的心,勇敢尝试,多实践,多动手,灵感往往来与你写的过程中。
有了上面的小示例,相信小伙伴们也能自己写写简单的CSS3动画了,如果有疑问,可以评论留言,大家一起学习探讨。

如需转载,请注明文章出处和来源网址:http://www.xuroms.com.cn/css3-style/c58243.shtml

欢乐二人雀神游戏 龙湖配资 2007上证指数 体彩彩票浙江20选5 东莞福利彩票快乐十分转让 浙江11选5选号技巧 辽宁十一选五复式 龙江福利彩票36选7 江西11选5前三组走势图 辽宁快乐12出号规律 吉林十一选五查询 下载股票行情软件 《博彩世界》 湖北快三游戏规则 北京pk赛车开奖结果 2011年上证指数 四维图新股票行情走势002249