css3鼠标悬停盒子移动
时间: 2023-12-12 12:11:32 浏览: 209
css3鼠标悬停动画
很高兴回答你的问题。你可以使用CSS3的transition和transform属性来实现鼠标悬停盒子移动的效果。例如:
.box{
width: 100px;
height: 100px;
background-color: #ccc;
transition: transform 0.5s ease-in-out;
}
.box:hover{
transform: translateX(50px);
}
这个代码会让盒子在鼠标悬停时水平移动50像素。当然,你可以根据需要调整动画的持续时间和缓动函数。
阅读全文