css实现鼠标放上去时图片过渡转换动画效果
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
代码
<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%); }
下一篇:CSS中width和height的默认值auto与%案例详解