css3笔记

1、转换

   1、转换简介

      1、什么是转换

         转换是使元素改变形状、位置、尺寸的一种效果

      2、转换分类

         主要分为 2d 转换 和 3d转换
2d转换主要是在 x，y轴进行的变换 
3d转换主要是在 x，y，z轴进行的变换

      3、转换属性

         属性：transform
取值：一个/一组 转换函数
   transform : none / transform-function;
   注意：transform-function 为 转换函数，如果是多个的话，中间用 空格 分开

      4、转换的原点

         在待转换的元素上定义一个点，所有的操作都将围绕着这个点来做
默认情况下，转换的原点就在 元素的 正中间处。
修改转换原点
属性：transform-origin
取值：
       数量：
       两个值 ：分别表示 x 轴的位置 和 y轴的位置
三个值 ：分别表示 x 轴的位置 和 y轴的位置 和 z轴的位置
值得形式:
1、百分比 : 按照元素的宽和高的占比来设置原点的位置
  0% 0% , 左上
  100% 100% , 右下
  50% 50% , 中心
2、具体是指 : 在元素的指定位置处设置原点
  0 0 ：左上
  宽最大值 高最大值 ：右下
3、关键字
  top,bottom,left,right,center

   2、2d转换

      使元素在x轴 和 y轴上产生的变换 称为2d转换

      1、位移

         让元素在x轴 或y轴所进行的位置的改变就称之为位移
属性：transform
函数：translate(x),translate(x,y)
      x : 表示横向位移距离，数值为正，向右移动，数值为负，向左移动
      y : 纵向移动距离，数值为正，向下移，数值为负，向上移

      取值：可以是具体的数值，也可以是 百分比

      单向位移：translatex(x),translatey(y)

      2、缩放

         改变元素的尺寸
属性：transform
函数：scale(x)或scale(x,y)
      注意：如果 scale() 只给一个参数的话 ，那么x轴，和y轴的缩放比例是一样的
      scale(2)  --> scale(2,2)

      取值：缩放比例 或 缩放倍数
      默认值 1 : 则为正常大小
      > 1 : 放大
      0 ~ 1 : 缩小

      单向缩放函数: scaleX(x),scaleY(y)

      3、旋转

         使元素，围绕着[中心点]所产生的旋转操作
属性：transform
函数：rotate(ndeg)
      注意：
        1、deg 为关键字， 不能省略，表示 角度
2、n 具体的旋转角度数值
   n为正 ， 则为顺时针旋转
   n为负 ， 则为逆时针旋转
3、旋转操作，会将元素的坐标轴一同发生旋转

      4、倾斜

         使元素按照一定的[角度]产生倾斜
属性：transform
函数：skew(x),skew(x,y)
单向倾斜函数 :skewX(x),skewY(y)

x 轴倾斜，让元素向着横向方向(左或右)倾斜(倒)

   3、3d转换

      x,y,z

      1、perspective

         假定 人眼 到 投射物体的距离

perspective 属性不能放置在3d变换元素本身上，要放在其父元素上。
该元素放在父元素上，其子元素能够产生3d变换的效果

兼容性问题
Chrome,Safari : -webkit-
Firefox : -moz-
Opera : -o-
IE : -ms

      2、转换属性 : transform

      3、转换函数(效果)

         1、位移
   改变元素在z轴的位置
   translatez()
   translate3d(x,y,z)
2、旋转
   让元素在 x轴 ， y轴 ， z轴的位置上分别产生一定的旋转操作

   x轴旋转 : 以x轴为中心轴所产生的旋转效果
   y       :
   z ：与2d 中转换效果是一致的

   rotatex(xdeg)
   rotatey(ydeg)
   rotatez(zdeg)

   rotate3d(x,y,z,deg)
   x,y,z 取值 ：0 或 大于0的数字
      0 : 说明该轴不参与旋转操作
      大于0 : 该轴参与旋转操作

   rotate3d(1,0,0,45deg) --> x轴旋转45deg
   |
   |
   等同
   rotatex(45deg)
   
   rotate3d(1,1,0,45deg) --> x轴旋转45deg，y轴旋转45deg
3、3d缩放
   scalez(z)
   scale3d(x,y,z)

       4、transform-style

          作用：使被转换的子元素保留其3d转换位置
 取值：
       flat : 子元素将不保留其3d位置(默认值)，子元素按2d方式展示
preserve-3d : 子元素将保留其3d位置，子元素可以按3d位置摆放

************************************************************

1、过渡

   1、什么是过渡

      是CSS属性值，在[一段时间]内[平缓]的过渡

   2、与过渡相关的要素

      1、过渡属性

         在哪个CSS属性值发生变化的时候要使用过渡效果

      2、过渡所需要的时间

         过渡会在指定的时间内产生变化效果

以上两个属性，为过渡操作中，不可缺少的元素

      3、过渡时间速度曲线函数

         过渡动画的速率

      4、过渡的延迟时间

         激发操作后，需要等待多长时间，再执行过渡的效果

   3、触发过渡效果

      1、通过 :hover 选择器进行触发

      2、通过Javascript 也可以完成过渡的触发

   4、过渡相关子属性

      1、过渡属性

         属性：transition-property
取值：CSS的属性名称;
      
      transition-property:background;
      transition-property:margin;

      none : 不适用过渡
      all : 所有属性值发生变化的时候，都使用过渡

可以设置过渡的属性：
1、颜色相关属性：color,background-color,border-color
2、取值为数值的相关属性：尺寸,margin,padding ...
3、转换属性 : transform
4、渐变属性 : background-image:linear-gradient(),radial-gradient()
5、visibility 属性 
6、阴影属性 : box-shadow,text-shadow

      2、过渡时间

         属性：transition-duration
取值：以 ms | s 作为单位
      1000ms = 1s
      500ms = 0.5s
注意：该属性不能省略，如果省略，默认为 0 ，则没有过渡效果

      3、过渡速度时间曲线函数

         属性：transition-timing-function
取值：
ease :默认值，快速变快，慢速结束
linear : 匀速
ease-in : 慢速开始，加速效果
ease-out : 快速开始，减速效果
ease-in-out : 慢速开始和结束，中间先加速再减速

      4、过渡延迟

         属性：transition-delay
取值：以 ms | s 为单位

      5、过渡的简写属性

         transition:property duration timing-function delay;

    5、多个过渡效果

       在各个属性取值时，用 , 隔开多个数据

       transition-property : background,width,height;

       transition-duration:3s,2s,1s;

       transition-timing-function:linear,linear,linear;

       transition-delay:1s,2s,3s;

       transition:backgrond 1s,
 width 3s linear 1s;

2、动画

   1、什么是动画

      可以在多个 状态 之间进行平缓过渡的效果

      实际就是多组属性间的平缓过渡

   2、动画的使用步骤

      1、声明动画

         声明关键帧：
关键帧：当前元素的几个关键状态。当设置好关键帧后，动画可以将几个 关键帧 连接起来，并使用过渡的效果显示出来
关键帧2要素：
  1、执行到当前关键帧的 时间点 0% , 100% ,50%
  2、当前关键帧的状态(css属性值)

语法：@keyframes 声明关键帧
@keyframes 动画名称{
/*声明关键帧*/
from | 0%{
/*CSS 样式;*/
background:red;
width:100px;
height:100px;
}

50%{
/*CSS 样式;*/
background:green;
width:200px;
height:200px;
}

to | 100%{
/*CSS 样式*/
background:blue;
width:300px;
height:300px;
}
}

      2、调用动画

         1、调用的动画名称
   属性：animation-name
   取值：已经声明好的 @keyframes 的动画名称
2、完成动画所需要的时间
   属性：animation-duration
   取值：ms | s
3、动画执行的时间速度曲线函数
   属性：animation-timing-function
   取值：ease linear ease-in ease-out ease-in-out
4、动画延迟
   属性：animation-delay
   取值：ms | s
5、动画播放次数
   属性：animation-iteration-count
   取值：具体数值 或 infinite(无限次)
6、动画播放方向
   属性：animation-direction
   取值：
         normal : 正常播放  0% ~ 100%
 reverse : 逆向播放 100% ~ 0%
 alternate : 轮流播放 ,奇数次数时，正常播放，偶数次数时则为逆向播放

         
7、动画的简写属性
   属性：animation 
   取值：name duration timing-function delay iteration-count direction;

8、动画填充模式
   动画在播放前后的填充模式
   属性:animation-fill-mode
   取值:none,forwards,backwards,both
9、动画播放状态
   属性：animation-play-state
   取值：
        running ：播放
paused : 暂停