请问哪里不对？
来源：2-9 自由编程
神知
2021-10-26 16:50:08
没有过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: relative;
}
div p{
width: 290px;
height: 40px;
background: #000;
opacity: 0.3;
position: absolute;
bottom: 0;
display: none;
color: #fff;
line-height: 40px;
padding-left: 10px;
transition: all 0.5s linear 0s;
}
div:hover p{
display: block;
}
</style>
</head>
<body>
<div>
<img src="images/duck.png" />
<p>这是一只小黄鸭</p>
</div>
</body>
</html>
1回答
-
樱桃小胖子
2021-10-26
同学你好，关于同学的问题解答如下：
1、没有过渡效果的原因是display:none会让标签元素消失，对于消失不存在的标签，无法使用transition实现从无到有的过渡。
2、本次练习要求
（1）效果分析：练习要求在鼠标放在图片上时，文字（即p元素）缓慢的从底部向上出现
（2）效果实现：既然是从底部向上慢慢出现，那就需要借助定位的特定方位属性bottom实现，具体参考如下：
动画原理：
希望可以帮到你，祝学习愉快！
0
相似问题