CSS实现动态效果+小实例

------------------html,body{height:100%;} 与 body{height:100%;}的区别：

body以html标签为高度参照，所以仅仅body 100%，并不能使它的子div100% 占据整个屏幕；

 html 100%使得html标签以页面窗口为参照，能使它的子div100% 占据整个屏幕；
 

------------------perspective

perspective-视距：用来设置用户与3d元素空间Z平面之间的距离

- perspective值越小，用户与3D空间z平面距离越近，3d元素看起来越大

- perspective值越大，用户与3D空间z平面距离越远，3d元素看起来越小

          详细参考：css3 视距-perspective - Qboooogle - 博客园

------------------实现标签居中

.conte{
    position:absolute;
    top:0;
    left:0;
    rightL0;
    bottom:0;
    margin:auto;
}

------------------transform-style：定义元素的2D/3D效果

transform-style属性指定元素如何在空间中呈现，有两个属性值：flat/ preserve-3d

        - flat 为默认属性值，表示元素在空间中以2D呈现

        - preserve-3d 则表示元素在空间中以3D呈现

------------------transform：实现元素的运动效果

transform

        transform属性使元素发生变化，主要有一下属性值：

                - 旋转： rotate

                - 扭曲 ：skew

                - 缩放 ：scale

                - 移动 ：translate

                - 矩阵变形： matrix

        transform属性用法：         

                 transform ： none /  <transform-function> 空格 <transform-function>

                        - none表示无变化；

                        - <transform-function>表示单个或多个变化操作，多个时属性值用空格隔开；

        transform属性值用法：

                - rotate(<angle>) 

                         rotate(<angle>) ：使元素进行指定角度的2D旋转

                         rotateX(<angle>) ：使元素在X轴上进行2D旋转

                         rotateY(<angle>) ：使元素在Y轴上进行2D旋转

Animation

        动画属性

                - animation-delay > 定义动画开始之前的延迟

                - animation-name > 定义需要绑定到Animation选择器的 keyframe 名称

                - animation-direction>定义是否轮流反向播放动画

                - animation-duration > 定义完成动画所花费的时间

                - animation-timing-function > 定义动画的速度曲线

                - animation-iteration-count> 定义动画循环次数

        定义动画

        animation + @keyframes(关键帧)

                - animation定义的属性值  <对应>  关键帧施加对象

                - 一般变化时使用关键字“from” 和 “to” ，详细(指定)变化时使用 “%” ；

                        “from，to” ==“0%, 100%”

                - 循环次数属性值 “infinite” 可以直接在animation里定义，效果与

                         “animation-iteration-count:infinite;” 相同