css3过渡效果
本文介绍了css3过渡效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
有一个div，当鼠标移动到div上，上面的遮罩层出现从下到上过渡效果。现在我定位放上去，height设置0px；hover不起作用，该怎么布局呢？
<style>
html,body{
margin:0;
padding:0;
}
.aa{
width: 400px;
height:289px;
}
.aa img{
width:100%;
}
.mask{
width:400px;
height:1px;
background: #000;
position: absolute;
top:0;
left: 0;
transition: all 1s;
}
.mask:hover{
height:289px;
}
</style>
<body>
<div class="aa"><img src="img-1.jpg"></div><div class="mask"></div>
解决方案
Dom结构本身有问题 ，不够语义化。
<div class="aa">
<img src="photo.png">
<p class="mask"></p>
</div>
html,body{
margin:0;
padding:0;
}
.aa{
width: 400px;
height:300
px;
overflow: hidden;
position: relative;
}
.aa img{
width:100%;
height:300px;
}
.mask{
width:400px;
height:300px;
background: #000;
position: absolute;
transform: translateY(0);
transition:all 0.4s linear;
}
.aa:hover .mask{
transform: translateY(-300px);
}这篇关于css3过渡效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
