《CSS动画:CSS3实现鼠标移到图片上出现文字标题或提示,鼠标移开文字隐藏消失》要点:
本文介绍了CSS动画:CSS3实现鼠标移到图片上出现文字标题或提示,鼠标移开文字隐藏消失,希望对您有用。如果有疑问,可以联系我们。
现在这个动画效果很常见,就是一张图片,
鼠标移上去,淡出或从各个角度浮出文字标题。鼠标移开这个文字标题又消失。
参效果图:
鼠标移上去出现jb51.cc,移开就恢复到原来状态。
实现这个很容易,直入主题:
1、HTML部分:
<div class=hideImgTitle posrelative> <img src=/img/p8/2017052117.jpg border=0 class=wow bounceIn alt=jb51.cc 教程> <a href=# class=hideTitle>jb51.cc 教程</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}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。