CSS3——制作帶動畫效果的小圖片
阿新 • • 發佈：2018-06-11
技術分享 margin OS div IV hidden pan ali body
還挺有意思的，但是我沒有截取動畫的軟件，就沒辦法展示我的小動圖了，暫時放一個靜態的吧：
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"> <divclass="pic_info"><p>圖片說明</p></div> </div> </body> </html>
CSS3——制作帶動畫效果的小圖片