/* 在hover中改变背景颜色 */
.box {
background-color: #ffffff;
transition: background-color 0.3s ease;
}
.box:hover {
background-color: #000000;
}
/* 在hover中旋转图片 */
.image {
transition: transform 0.3s ease;
}
.image:hover {
transform: rotate(180deg);
}
/* 在hover中改变字体颜色 */
.text {
color: #000000;
transition: color 0.3s ease;
}
.text:hover {
color: #ffffff;
}
/* 在hover中改变边框颜色 */
.button {
border: 1px solid #ffffff;
transition: border-color 0.3s ease;
}
.button:hover {
border-color: #000000;
}利用CSS3动画hover不仅能够改变元素的样式，还能够增加交互效果，提升用户体验。通过hover，大家能够让元素出现/消失、放大/缩小、旋转等等。
除了改变元素的样式，大家还可以给元素添加hover事件，使得当用户鼠标悬浮在元素上时触发相应的事件。比如，大家可以为按钮添加hover事件，当用户悬浮时弹出提示信息等。
总之，利用CSS3动画hover可以让网页更加生动，给用户带来更好的体验。