0
点赞
收藏
分享

微信扫一扫

css3 实现鼠标移入文字下滑动画效果

猫er聆听没落的旋律 2022-07-14 阅读 33

效果图展示:

css3 实现鼠标移入文字下滑动画效果_css

鼠标移入,文字动画.gif

css

.wrap{
width: 250px;
height: 250px;
overflow:hidden;
position: relative;
}
.txt{
position: absolute;
width: 250px;
height: 250px;
top:-250px;
background:rgba(0,0,0,0.5);
}
.img img{
width: 100%;
}
.wrap,.txt{
transition: all .5s;
cursor: pointer;
}
.wrap:hover .txt{
top:0;
}

html

<div class="wrap">
<div class="txt">
我是亲爱哒问吗可是怕拉风阿斯达发噶实打实吗,爱上
</div>
<div class="img">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3502659583,3709665526&fm=26&gp=0.jpg" alt="" >
</div>
</div>

如果是从下往上

.txt{
position: absolute;
width: 250px;
height: 250px;
bottom:-250px;
background:rgba(0,0,0,0.5);
}

举报

相关推荐

0 条评论