css3 transition 动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: gainsboro; } .out { margin:10px; width: 200px; height: 200px; background-color: cadetblue; padding-top: 20px; display: block; float: left; } .out h2, .out p { opacity: 0; transition: all 0.2s linear; } .out h2.hh { width: 100%; height: 20px; background-color: antiquewhite; transform: translateY(-100px); font-size: 16px; padding-top: 2px; padding-bottom: 2px; } .out p.pp { width: 100%; height: 120px; overflow: hidden; background-color: aquamarine; transform: translateY(100px); margin-top: 50px; } .out:hover h2, .out:hover p { opacity: 1; transform: translateY(0px); } </style> </head> <body> <div class="out"> <h2 class="hh">head ...</h2> <p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p> </div> <div class="out"> <h2 class="hh">head ...</h2> <p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p> </div> <div class="out"> <h2 class="hh">head ...</h2> <p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p> </div> <div class="out"> <h2 class="hh">head ...</h2> <p class="pp"> info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,info ,blabula ,</p> </div> </body> </html>
没有加兼容各种现代浏览器的 前缀,再谷歌浏览器可以正确查看