还挺有意思的，但是我没有截取动画的软件，就没办法展示我的小动图了，暂时放一个静态的吧：
main.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> .box{ width:249px; height:299px; margin:50px auto; position:relative; overflow:hidden; } .box .pic_info{ width:249px; height:100px; background-color: rgba(0,0,0,0.5); color:#fff; position: absolute; left:0; top:300px; transition:all 500ms ease; } .box:hover .pic_info{ top:250px; } .box .pic_info p{ text-align: center; } </style> </head> <body> <div class="box"> <img src="images/login.jpg" alt="animal"> <div class="pic_info"><p>图片说明</p></div> </div> </body> </html>