CSS3新增属性2

阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

背景

background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment

CSS3变换

• transform

  translatex() 
  translatey()
  translate(x, y)
  rotate() 角度 deg
  skewx()  角度deg
  skewy()
  skew(x, y)
  

• transform-origin 变换的原点。 对translate没有意义。 对rotate影响大

过渡效果

哪些CSS属性可以过渡

长度 (padding margin width height  left/top/right/bottom border-width  background-position ...)
颜色
变换
纯数字 (opacity、z-index)

触发过渡

伪类触发  :hover  :focus  ....
媒体查询   @media
JS

相关属性

transition-property  指定要过渡的属性 用,隔开。默认是 all
transition-duration  过渡持续时间
transition-timing-function  过渡线性效果  默认 ease
transition-delay   过渡延迟
transition：property timing-function duration delay

CSS3动画

关键帧

@keyframes 动画名字 {
    0% {
        
    }
    20% {
        
    }
    40% {
        
    }
    100% {
        
    }
}

相关CSS属性

animation-name  指定动画的名字
animation-duration  动画的执行时间
animation-timing-function  执行效果速度  
animation-delay   延迟
animation-iteration-count   循环 次数  infinite(无限)
animation-direction:  alternate （正向 反向 交替） reverse（反向）
animation-play-state: running / paused
animation 复合属性