CSS动画学习

Demo效果

                                                            

当鼠标滑到图片上的时候，图片出现蒙版效果，而且周边的颜色出现动画交替。

                                                                                            源码下载

------------------------------------------------------------------------------------------------------

效果分析

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

技术点分析

1、border-radius

功能：

为DIV添加圆角框。

用法：

border-radius: 1-4 length|% / 1-4 length|%;

 
 
值
描述
             length
                 定义圆角的形状。
           
 %
                 以百分比定义圆角的形状。

实例

2、RGBA

功能：

增加了Alpha透明度的RGB表示法。

用法：

RGBA(R,G,B,A)

R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数 A：Alpha透明度。取值0~1之间。

3、:hover

功能：

选择鼠标指针浮动在其上的元素，并设置其样式

4、transform

功能：

旋转 div 元素

用法：

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

实例

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

总结思考

1、知道自己不知道的是一件了不起的事情。

2、主动跟高人相处。