本文主要是介绍php鼠标放上文字会显示_CSS动画：CSS3实现鼠标移到图片上出现文字标题或提示，鼠标移开文字隐藏消失...，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《CSS动画：CSS3实现鼠标移到图片上出现文字标题或提示，鼠标移开文字隐藏消失》要点：
本文介绍了CSS动画：CSS3实现鼠标移到图片上出现文字标题或提示，鼠标移开文字隐藏消失，希望对您有用。如果有疑问，可以联系我们。
现在这个动画效果很常见，就是一张图片，
鼠标移上去，淡出或从各个角度浮出文字标题。鼠标移开这个文字标题又消失。
参效果图：
鼠标移上去出现vephp.com ,移开就恢复到原来状态。
实现这个很容易，直入主题：
1、HTML部分：
vephp.com 教程
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}
这篇关于php鼠标放上文字会显示_CSS动画：CSS3实现鼠标移到图片上出现文字标题或提示，鼠标移开文字隐藏消失...的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
