像这个特效该怎么实现？
2 回答
已采纳
我要开发地图系统
TA贡献29条经验 获得超13个赞
stone310的答案非常好，
说白了，这个效果就是用css中的 :hover来实现的，当然慕课网还用了过渡使变化更顺畅。
:hover 的作用就是当鼠标经过时，元素发生的变化， 这里是作用在子元素上。
stone310
TA贡献361条经验 获得超191个赞
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<style>
#box {
width:200px;
height:200px;
margin: 300px;
}
#div1 {
width: 100%;
height: 80%;
background: red;
position: relative;
overflow: hidden;
}
#price{
width:100%;
height:20%;
position:relative;
background:blue;
color: white;
}
#div2 {
width: 100%;
height: 100%;
background: black;
opacity: 0.7;
position: absolute;
top: 70%;
transition: all 0.5s ease;
color: white;
}
#box:hover #div2 {
top:20px;
opacity:0.7;
}
</style>
</head>
<body>
<div id="box">
<div id="div1">
<div id="div2">
<h2>HELLO!</h2>
<p>文章正文文章正文文章正文文章正文文章正文文章正文文章正文文章正文文章正文</p>
</div>
</div>
<div id="price">$128.00</div>
</div>
</body>
</html>- 2 回答
- 0 关注
- 1371 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消