css3实现⼀个动画效果,⿏标移⼊画⾯向上移动⽹页初始状态(附图):
⽹页最后状态(附图):
下⾯是css代码:
.a{
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
background-color: aqua;
}
.b{
width: 300px;
height: 320px;
background:rgba(114,111,111,0.4);
text-align: center;
transition: 0.3s;
position: absolute;
margin-top: 254px;
top: 1px;
z-index: 9999;
}
.a :hover.b{
opacity: 1;css特效文字
transition: 0.3s;
margin-top: -3px;
font-size: 18px;
}
html部分:
<div class="a"><img src="img/tu.jpg"><div class="b">⼩⼥孩</div></div>
最后附⾔:最关键的是最下⾯那⾏,是借助设置⽂字的⾼度然后⽤margin-top负值来控制。