css查漏补缺

伪类

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

组合选择器

后代选择器

div p {
  background-color: yellow;
}

子选择器

div > p {
  background-color: yellow;
}

兄弟选择器
注意这里的div和p一定是紧密相连的

div + p {
  background-color: yellow;
}

通用兄弟选择器
不一定是紧密相连的，只要是同级同父的即可

div ~ p {
  background-color: yellow;
}

过渡

transition
transition: width 2s;
当width改变时，自动以两秒完成过渡
(如果有多个要监听的属性，用逗号分隔）
这里除了监听这种一般的属性，还可以监听transform（形成最简单的动画）

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: background 2s,width 2s;
}

div:hover {
  width:300px;
  background: blue;
}

transition-timing-function
这个属性是用来设置过度曲线的

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

transition-delay
延迟过渡，参数是…s

动画

@keyframes
当动画播放结束恢复原状，而且animation-duration这个参数不能少，缺失了就不播放动画
除了from to，还可以用%表示变化的过程

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

animation-iteration-count
播放几次动画，可以设置为infinite

animation-direction
播放顺序：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

animation-play-state
播放状态：
基本就用running和paused，running是默认值

简写

animation: example 5s linear 2s infinite alternate;

渐变

linear-gradient
参数分别为：角度，颜色1，颜色2.。。。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

radial-gradient
参数分别为：形状shape（默认椭圆ellipse，还可以设置成circle），中心的颜色，。。。最外面的颜色

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

repeating-linear-gradient()
repeating-radial-gradient()
重复渐变