css hover 动画

CSS hover 动画可以通过伪类选择器:hover来实现，常见的方式是使用transition或者animation属性。

使用transition实现hover动画的示例代码如下：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.3s ease;
}

.box:hover {
  background-color: blue;
  transform: scale(1.2);
}

使用animation实现hover动画的示例代码如下：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box:hover {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(10px, 0); }
  40% { transform: translate(-10px,0); }
  60% { transform: translate(10px, 0); }
  80% { transform: translate(-10px, 0); }
  100% { transform: translate(0, 0); }
}

以上代码中，.box为需要添加hover动画的元素，使用transition属性时，在:hover伪类选择器中定义要变化的属性和变化时间；使用animation属性时，则需要先定义一个关键帧动画，然后在:hover伪类选择器中指定该动画名称即可。