CSS
-
CSS3中设置动画时间外属性animation-fill-mode
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。 -
CSS3中设置动画的播放状态animation-play-state
animation-play-state属性主要用来控制元素动画的播放状态。 -
CSS3中动画播放方向animation-direction
animation-direction属性主要用来设置动画播放方向。 -
CSS3中设置动画播放次数animation-iteration-count
-
CSS3中设置动画播放方式animation-timing-function
animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。 -
CSS3中设置动画播放时间animation-duration
animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间。 -
CSS3中调用动画animation-name和animation-duration
animation-name属性主要是用来调用 @keyframes 定义好的动画。 -
CSS3 Keyframes介绍
Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。 -
CSS3中过渡属性 transition-property
早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。 -
CSS3中原点 transform-origin
原点 transform-origin任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。 -
CSS3中矩阵 matrix()
matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果需要深入了解,需要对数学矩阵有一定的知识。 -
CSS3的变形和动画系列方法
介绍一系列CSS3.0的动画玩法。 -
CSS3中缩放 scale()
缩放 scale()函数 让元素根据中心原点对对象进行缩放。 -
CSS3中的扭曲 skew()
扭曲 skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。 -
CSS3中的旋转 rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。 -
CSS3中::before和::after选择器
::before和::after主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。 -
CSS中:read-write选择器
:read-write选择器与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。 -
CSS3中的:read-only选择器
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’”