像這個特效該怎么實現？
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 關注
- 1470 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消