像这个特效该怎么实现？ 慕课首页课程介绍
像这个特效该怎么实现？
赏金码农浏览 1414回答 2
2回答
-
我要开发地图系统
stone310的答案非常好，说白了，这个效果就是用css中的 :hover来实现的，当然慕课网还用了过渡使变化更顺畅。:hover 的作用就是当鼠标经过时，元素发生的变化， 这里是作用在子元素上。 -
stone310
<!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>
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5