css实现鼠标放上去时图片过渡转换动画效果
网页制作 发布日期：2025/11/3 浏览次数：1
正在浏览：css实现鼠标放上去时图片过渡转换动画效果
代码
<div class="test"> <div></div> <div></div> </div>
.test{
width: 200px;
height: 200px;
margin-top: 200px;
margin-left: 300px;
overflow: hidden;
background-color: red;
}
.test div{
width: 100%;
height: 100%;
transition: 500ms;
}
.test div:last-child{
background-color: green;
}
.test:hover div{
transform: translateY(-100%);
}