css3背景色过渡

css进阶

        背景颜色径向渐变
        背景颜色线性渐变
        过渡

背景颜色径向渐变

    径向渐变：中间部分椭圆形，四周填充（由中间到四周渐变）

  background: radial-gradient(red,yellow);          红椭圆填充黄色
  background: radial-gradient(circle,red,yellow);   红正圆填充黄色
  background: radial-gradient(red 60%,yellow 60%);  红60%，之后黄色
  background: radial-gradient(50px 50px,red 50px,black 100px);   圆的垂直半径，水平半径设置
  background: radial-gradient(at left top,red 50%,black 50%);    at设置圆心位置，来达到控制方向
  background: repeating-radial-gradient(red 20px,green 50px);    圈圈套圈圈，循环

 

背景颜色线性渐变

    默认由上到下渐变（可设置渐变方向）

 background: linear-gradient(red,yellow);  颜色由红变黄
 background: linear-gradient(red 60%,yellow 60%);  红色占60%，然后开始渐变红到黄。
                                                   然后黄色从60%开始，就会形成分割线
 background: linear-gradient(to right,red,yellow);  到右，从左到右
 background: linear-gradient(to left,red,yellow);   到左，从右到左
 background: linear-gradient(to right bottom,red,yellow);  到右下
 background: linear-gradient(60deg,red,yellow);  旋转60度
 background: repeating-linear-gradient(black 0 , black 10px , transparent 10px ,
 transparent 20px)     repeating-linear-gradient规定颜色范围，方便循环

 

过渡

    transition-duration 过渡持续时间（duration：持续时间）
    transition-property 需要执行过渡的样式（默认all：都改变。width:只改变宽，height：只改变高）
    transition-delay 过渡延迟时间（delay：延迟）
    transition-timing-function 过渡速度快慢曲线（默认：慢快慢，linear：匀速）
    更多曲线查看贝塞尔曲线
    transition 复合样式。过渡时间/延迟时间，其他顺序任意写