核心提示：1.动画效果一：鼠标放上去，后面的背景图放大到一定程度，下面的有个内容盒子，以一定的速度从下向上运动，并且盒子的背景颜色逐渐加深。!DOCTYPE htmlhtml lang=enheadmeta c...
1.动画效果一：鼠标放上去，后面的背景图放大到一定程度，下面的有个内容盒子，以一定的速度从下向上运动，并且盒子的背景颜色逐渐加深。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.big {
width: 420px;
height: 372px;
overflow: hidden;
position: relative;
border: 1px solid #000;
}
.bigone {
position: absolute;
top: 0;
left: 0;
}
.bigone .pic {
width: 100%;
height: 100%;
overflow: hidden;
}
.bigone .pic img {
width: 100%;
height: 100%;
transition: all 0.5s;
}
.big:hover img {
transform: scale(1.5);
}
.bigone .dl {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 109px;
background: rgba(0,0,0,0.4);
}
.bigone .dl p {
font-size: 30px;
color: #fff;
padding: 20px;
}
.bigtwo {
width: 100%;
height: 260px;
position: absolute;
bottom: -120px;
left: 0;
background: rgba(0,0,255,0);
transition: all 0.5s;
}
.bigtwo p {
font-size: 18px;
color: rgba(255,255,255,0);
padding: 10px;
}
.big:hover .bigtwo {
transform: translateY(-120px);
background: rgba(0,0,255,0.7);
}
.big:hover p {
color: rgba(255,255,255,1);
}
</style>
</head>
<body>
<p class="big">
<p class="bigone">
<p class="pic">
<img src="1.jpg" alt="">
</p>
<p class="dl">
<p>这是一段话</p>
</p>
</p>
<p class="bigtwo">
<p>这是遮罩层</p>
</p>
</p>
</body>
</html>
