CSS3介绍:CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在
@keyframe 用法:
@keyframe name{
0%{top:0;}
50%{top:10px;}
100%{top:0;}
}
单个帧中可填写多个属性,而且不需要保证一致,
注意:关键帧中有效的属性为可动画属性;如出现不可动画属性,会忽略该属性,不影响其余属性的动画,
某个关键帧如果重复定义,则取后定义的帧。
帧数范围0%-100%,不属于这个范围的则被忽略(关键帧定义可以不安顺序来,可以正确执行,
2.transform-style:preserve-3d;这个样式指定元素可以使用3D动画。
3.transform-origin,是指定旋转的中心点,做那个轴(XYZ)的旋转动画,我们就将对应轴的值
写成50%
是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。
这些模块包括:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
简而言之:升级了CSS,可以做更多的特效,很多细节不用再去依赖PS了。很多动画的实现也不用再去依赖JS或者JQuery了。
@keyframe 用法:
@keyframe name{
0%{top:0;}
50%{top:10px;}
100%{top:0;}
}
单个帧中可填写多个属性,而且不需要保证一致,
注意:关键帧中有效的属性为可动画属性;如出现不可动画属性,会忽略该属性,不影响其余属性的动画,
某个关键帧如果重复定义,则取后定义的帧。
帧数范围0%-100%,不属于这个范围的则被忽略(关键帧定义可以不安顺序来,可以正确执行,
但是可读性不太好)。
2.transform-style:preserve-3d;这个样式指定元素可以使用3D动画。
3.transform-origin,是指定旋转的中心点,做那个轴(XYZ)的旋转动画,我们就将对应轴的值
写成50%