过渡复习

0.过渡属性

 

      transition-property  过渡的属性

      transition-duration  2s  过度持续了多久

      transition-timing-function ease 过渡完成的时间曲线

      transition-delay：3s 过渡效果延迟了多久

      transition:width 2s

1.2d设置属性和属性值

     平移的变换

     transform:translate(30px,30px);

     旋转的变换

     transform:rotate(45deg);  一圈 1trun  

     缩放的变换

     transform：scale(2,2)  scaleX scaleY

     斜切的变换

     transform：skew(30deg)

     transform-origin:center center

              1.写水平方向

              2.写竖直方向

     既平移又旋转

     transform：scale（2，1） translate(30px)

2.如何使用css3动画

   animation:name duration timing-function delay iteration-count  direction  fill-mode

   动画名称

   animation-name:move

   动画持续了多久

   animation-timing:3s

   动画时间曲线

   animation-timing-function:ease;

   动画延迟了多久才执行

   animation-delay：1s

   动画执行的次数：1/2/3 infinite(无限次)

   animation-iteration-count:infinite;

   动画执行的方向：normal(顺时针) reverse(逆时针)

    alternate-reverse(先顺时针后逆时针) alternate()

   

   animation-direction:normal;

   animation-direction:reverse;

   animation-direction:alternate-reverse;

   animation-direction:alternate;

   动画最后一帧应用的样式

   animation-fill-mode:forwards;

   animation:move 3s;

   animation:move 3s linear;

   animation:move 3s linear 2s;

   animation:move 3s linear 2s infinite;

   animation:move 3s linear infinite;

   move：名称  3s：时长3s  

   linear：匀速    infinite: 无限

   用的较多的是

   animation：move 3s infinite;

3.css3新增的选择器

   结构伪类选择器

   属性选择器

   伪类选择器

   否定选择器

   目标选择器

   UI状态选择器

    1.[class] 相同类名的

    2.[type='text']{ width:300px; background-color:pink; }

    3.选择类名以item开始的

      [class^=item]{}

    4.选择类名以item结束的 [class$=item]{}

    5.类名中只要包含box即可 [class*=box]{}

4.css3新增的背景相关

    background-position: contain cover