2-9自由编程提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
height: 300px;
width: 300px;
overflow:hidden;
position:relative;
margin:20px auto;
}
img{
height: 300px;
width: 300px;
}
p{
width: 300px;
height: 40px;
line-height:40px;
text-align:center;
position:absolute;
background-color: rgb(0, 0, 0,.2);
bottom:-40px;
transition:bottom 1s ease 0s;
}
div:hover p{
bottom:0;
}
</style>
</head>
<body>
<div>
<img src="images/duck.png" alt="">
<p>不可以吃鸭鸭</p>
</div>
</body>
</html>
正在回答
同学你好，动态效果完成的很棒，赞一个。
优化建议：
1、 小黄鸭的图片有些压缩变形了，建议调整如下：
毕竟小黄鸭那么可爱，同学怎么忍心让它被压缩呢，另外老师希望同学能按照视频中的效果进行还原，这样我们是不是又练了一下基础~。
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星