css3渐变和css3动画笔记

css3

css3属性: 预览版,还没有一个正式的最终版,多以有很多的兼容性问题,浏览器不识别

        浏览器为了使这些属性兼容,每一个浏览器厂商都提供了一个属于自己的浏览器的语法规则,浏览器兼容前缀
         
        主流浏览器:
            谷歌  火狐 苹果 欧朋  ie
             
        浏览器前缀:
            -webkit-    谷歌浏览器
            -moz-       火狐浏览器
            -ms-        ie浏览器
            -o-         欧朋浏览器
             
        box-shadow:水平偏移量 垂直偏移量 模糊度 模糊大小 颜色;盒子阴影

css3渐变: 由浏览器生成的

        线性渐变:
        background: -webkit-linear-gradient(方向,颜色1,颜色2,颜色3,....颜色n);
        background: linear-gradient(to 方向,颜色1,颜色2,颜色3,....颜色n);
         
        1 单一方向渐变: 
            left 从左边开始
            right 从右边开始
            top 从上边开始
            bottom   从底部开始
            注意: 需要添加兼容前缀
             
            to left 到左边(结束位置)
            to right 到右边
            to top  到顶部
            to bottom 到底部
            注意: 不要添加兼容前缀
         
        2 对角渐变:
            left top    左上开始
            left bottom 左下开始
            right top   右上开始
            注意: 带兼容前缀
             
            to left top 到左上(结束位置)
            注意: 不带兼容前缀
             
        3 角度的渐变
            10deg   10度
             
        4 默认情况下颜色趋于均分
            可以指定颜色分布的百分比,让颜色按照百分比进行渐变
            blue 10%    到10% 都是蓝色
            red 10px    到10px都是红色

径向渐变:(一定要加浏览器前缀)
从一个点到四周的渐变

            background:-webkit-radial-gradient(渐变位置,形状,大小,颜色1,颜色2,颜色3);
            渐变位置: 默认从中心到四周
                left    从左边到四周的渐变
                right
                top
                bottom
                 
                left top    从左上角到四周的渐变
                left bottom 
                right top
                ...
                 
                10px 30px   距离左边10px 距离上边30px
                 
            形状:
                默认椭圆    ellipse
                正圆      circle
                注意: 元素是正方形,则都是正圆
                 
            大小:
            size：渐变的大小，即渐变到哪里停止，它有四个值。 
                closest-side：最近边； 
                farthest-side：最远边； 
                closest-corner：最近角； 
                farthest-corner：最远角。

渐变重复: repeatig-
线性渐变:

            径向渐变:
             
        补充:
        渐变用的背景属性是 background-image:;

2D位移 translate()
• 将元素向指定的方向移动，类似于position中的relative。
• 水平移动：向右移动translateX(tx)和向左移动translateX(-tx)；
• 垂直移动：向下移动translateY(ty)和向上移动translateY(-ty);
• 对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动
translate(-tx,-ty)和左下角移动translate(-tx,ty)。
2D缩放scale()
• 让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，
使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
• scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值
是1。
• scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值
是１。
• scale(tx,ty):水平方向和垂直方向都放大
3、rotate()
旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
transition:skew();倾斜

        3d:
            区别于2d的地方,3d有近大远小
            景深:
                perspective:; 元素视线的距离,一般在父元素中使用
                900px-1200px
                 
            事物的观察点:
                perspective-origin:;
                    center left right top bottom
                    % px
                     
            3d的场景:
                transform-style:;
                    flat    默认值,是呈现在2d场景中
                    preserve-3d 呈现在3d中
                 
                3d位移
                3d旋转
                3d缩放
                注: 比2d多一个z轴
                 
        css3动画
            1: 定义一个动画过程
                1) 
                @keyframes mz{
                    from{初始状态}
                    to{结束状态}
                }
                 
                2)
                @keyframes mz{
                    0%{初始状态}
                    ...
                    100%{结束状态}
                }
                 
                 
            2: 给对应的元素调用
                animation:动画名字 运动时间 运动的类型 动画延迟时间 动画是否循环 运动的方向;
                animation-name:;
                animation-duration:;
                animation-timing-function:;
                animation-delay:;
                animation-iteration-count:;
                animation-direction:;
                 
            鼠标移入时暂停:
                animation-play-state:;
                 
            animation 和 transition的对比:
                相同点: 都是随着时间的改变而改变元素的属性值
                不同点: transition需要触发一个时间才会引起元素属性的改变
                    animation不需要任何事件触发也可以完成元素随着时间的变化而改变属性
                 
        添加:
            background:rgba(红,绿,蓝,透明);
                透明取值范围 0-1
                 
            border-radius:圆角;
             
            backface-visibility:hidden; 背面不可见
             
            选择器:target{}    关联目标元素