《CSS動畫：CSS3實現鼠標移到圖片上出現文字標題或提示，鼠標移開文字隱藏消失》要點：
本文介紹了CSS動畫：CSS3實現鼠標移到圖片上出現文字標題或提示，鼠標移開文字隱藏消失，希望對您有用。如果有疑問，可以聯系我們。

相關主題：CSS2和CSS3特效

現在這個動畫效果很常見，就是一張圖片，

鼠標移上去，淡出或從各個角度浮出文字標題。鼠標移開這個文字標題又消失。

參效果圖：

鼠標移上去出現vephp.com ,移開就恢復到原來狀態。

實現這個很容易，直入主題：

1、HTML部分：

<div class="hideImgTitle posrelative">
 <img src="/img/p8/2017052117.jpg" border="0" class="wow bounceIn" alt="vephp.com 教程">
 <a href="#" class="hideTitle">vephp.com 教程</a>
</div>

2、CSS部分：

.posrelative{position: relative;}
.hideImgTitle{
       height:120px;
       overflow: hidden;
}
.hideImgTitle:hover a{
       animation:mymove 1s 1;
       -webkit-animation:mymove 1s 1; /*Safari and Chrome*/
       animation-fill-mode:forwards;
       -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
}
@keyframes mymove
{
       from {bottom: -70px;}
       to {bottom: 0px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
       from {bottom: -70px;}
       to {bottom: 0px;}
}
.hideTitle{
       display:block;
       width:120px;
       height: 70px;
       padding: 5px;
       background: #9c40e9;
       color:#fff;
       position: absolute;
       bottom: -70px;
       overflow: hidden;
       transition: all 0.3s;
}
.hideTitle:hover{color:#fff;text-decoration: none}

轉載請注明本頁網址：
http://www.fzlkiss.com/jiaocheng/135.html