css3新特性之

1. 渐变 https://www.w3school.com.cn/css/css3_gradients.asp

1 background-image: linear-gradient(to bottom right, red, yellow);

2，径向渐变 https://www.w3school.com.cn/css/css3_gradients_radial.asp

1 background-image: radial-gradient(red, yellow, pink);

3，过渡 https://www.w3school.com.cn/css/css3_transitions.asp

1 #app {
2          200px;
3         height: 200px;
4         background: rgb(235, 136, 136);
5         transition: width 2s, height 3s;
6       }
7       #app:hover {
8          500px;
9       }

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;

4，动画

缩小-放大效果

  // animation: scalc 1s linear infinite;
  // @keyframes scalc {
  //   0% {
  //     transform: scale(1);
  //   }
  //   50% {
  //     transform: scale(1.2);
  //   }
  //   100% {
  //     transform: scale(1);
  //   }
  // }

从左到右跑动效果

  // position: absolute;
  // top: 0;
  // left: 0;
  // animation: light 1s linear infinite;
  // @keyframes light {
  //   0% {
  //     left: -1rem;
  //   }
  //   100% {
  //     left: 3.28rem;
  //   }
  // }