css3鼠标移动动画 |css 中文字强行换行

/* 实现鼠标移动动画 */
.box {
background-color: #fff;
width: 200px;
height: 200px;
position: relative;
transition: all .3s ease;
}
.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0) translateZ(0);
opacity: 0;
transition: all .3s ease;
z-index: -1;
}
.box:hover:before {
transform: scale(1) translateZ(0);
opacity: 1;
}

这段CSS代码通过创建一个.box元素和一个.box:before伪元素，实现鼠标移动时的渐变效果。.box元素设置背景颜色和宽高，并设置了过渡效果。.box:before伪元素则通过定位和z-index属性实现绝对定位。通过应用hover伪类，实现了当鼠标悬停在.box元素上时，.box:before伪元素的渐变效果。

可以通过修改.box元素和.box:before伪元素的属性来实现不同的鼠标移动动画效果。比如改变颜色、形状、位置等。这种动画效果可以应用于图片、按钮、标题等元素中，让网页设计更加生动有趣。