css3 过渡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .items { width: 1250px; height: 320px; padding-left: 20px; margin: 80px auto; } .item { width: 230px; height: 300px; text-align: center; margin-right: 20px; background-color: #FFF; float: left; position: relative; top: 0; overflow: hidden; transition: all .5s; } .pic { margin-top: 30px; } .desc { position: absolute; bottom: -100px; width: 100%; height: 100px; background-color: #ff6700; transition: all .5s; } .item:hover { top: -5px; box-shadow: 0 0 15px #AAA; } .item:hover .desc { bottom: 0; } </style> <body> <div class="items"> <div class="item"> <img src="imgs/1.jpg" alt=""> </div> <div class="item"> <div class="pic"> <img src="imgs/2.jpg" alt=""> </div> <div class="desc"></div> </div> <div class="item"> <div class="pic"> <img src="imgs/3.jpg" alt=""> </div> <div class="desc"></div> </div> <div class="item"> <div class="pic"> <img src="imgs/4.jpg" alt=""> </div> <div class="desc"></div> </div> <div class="item"> <div class="pic"> <img src="imgs/5.jpg" alt=""> </div> <div class="desc"></div> </div> </div> </body> </html>初始状态 鼠标移动上去显示过渡效果
