码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标悬停显示透明文字内容

时间:2015-08-27 12:49:04      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

我总结了一个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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!