<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
background-color: skyblue;
position: relative;
overflow: hidden;
}
h2 {
text-align: center;
display: block;
width: 500px;
height: 300px;
}
p {
float: left;
width: 500px;
height: 200px;
display: block;
position: absolute;
top: 300px;
left: 0;
transition: all 3s;
}
.box:hover p {
top: 50px;
}
</style>
<div class="box">
<h2>杨小明：过度笔记</h2>
<p>
属性：transition<br>1、属性值：transition-property (要产生过度效果的css属性，多个属性加逗号)<br>2、属性值：transition-duration (过度效果时长)<br> 3、属性值：transition-timing:function (速度方式)<br>3-1、linear(匀速)<br>3-2、ease(减速)<br>3-3、ease-in(逐渐加速)
</p>
</div>
