我总结了一个css规律，凡是变化的css特效，总是在不同状态之间转换，只要规定好不同状态下的样式就好了
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>鼠标悬停显示透明文字内容</title> <style> .xuanting{ width:220px; margin:0 auto; height:240px; background:url(./images/lf.jpg) no-repeat; cursor:pointer; position:relative; overflow:hidden; /* 在no hover时隐藏文本内容 */ } .xuanting span.neirong{ width:100%; height:100%; /* 绝对定位 */ position:absolute; top:100%; left:0; /* 字体设定 */ color:#ff4d4d ; background:#e5e5e5; opacity:0.4; text-align:center; /* 动画效果 */ transition:top 1s ease-out; -webkit-transition: top 2s ease-out; } .xuanting:hover span.neirong{ top:0; } </style> </head> <body> <div class="xuanting"> <span class="neirong">我要成为海贼王的男人</span> </div> </body> </html>
原文：http://www.cnblogs.com/lhat/p/4762734.html