css3 hover动

在网页设计中，我们常常需要使用CSS3中的Hover动态效果，可以让鼠标在悬停在链接、按钮或其它元素上时，出现相应的视觉效果，增加互动性及美观度。

.button {
  background-color: #0475b0;
  color: #fff;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}
 
.button:hover {
  background-color: #fff;
  color: #0475b0;
  border: 2px solid #0475b0;
}

以上代码添加了按钮的基本样式，并使用Hover效果使得按钮在悬停时，背景颜色和字体颜色发生改变，边框也变为蓝色，整个按钮的样式更加醒目。此外，还可以使用CSS3的Transform属性实现更加华丽的Hover动画效果，比如旋转、放大、缩小、倾斜等等。

.hover-icon {
  width: 50px;
  height: 50px;
  transition: all 0.2s ease-in-out;
}
 
.hover-icon:hover {
  transform: rotate(180deg) scaleX(1.2) scaleY(1.2);
}

以上代码实现了一个图标的旋转和缩放动画效果，使得图标在鼠标悬停时更加生动活泼。

总之，CSS3的Hover动态效果可以为网页元素添加更加生动丰富的交互体验、提升用户体验、增加美感，同时也可以通过漂亮的Hover效果来吸引用户注意力，让用户更加自然地感受整个网页的设计风格。