当前位置:  首页  >  PHP资讯  >  业界资讯

css如何实现让文字滑入的方式

css实现让文字滑入的方法:首先创建一个HTML示例文件,并定义一行文字;然后通过设置css样式为“h1:hover#slidemeta{display:block;-webkit-animation:slide}”即可。

css实现让文字滑入的方法:首先创建一个HTML示例文件,并定义一行文字;然后通过设置css样式为“h1:hover #slidemeta{display:block;-webkit-animation:slide...}”即可。

本教程操作环境:Dell G3电脑、Windows7系统、HTML5&&CSS3版本。

推荐:《css视频教程》

CSS3文字横向滑入效果

HTML

将鼠标移至此处
文字

CSS

#slidemeta { display: none; right:0; position: absolute; font-size: 14px; color: red; font-family:arial } h1:hover #slidemeta{ display:block; -webkit-animation:slide .8s ease-in; -webkit-animation-fill-mode:forwards; -moz-animation:slide .8s ease-in; -moz-animation-fill-mode:forwards; } @-webkit-keyframes slide{ 0% { right:410px; opacity:0;} 70% { right:0;opacity:0.7} 100% { opacity:1;right:85px;} } @-moz-keyframes slide{ 0% { right:410px; opacity:0;} 70% { right:0;opacity:0.7} 100% { opacity:1;right:85px;} }

效果图:

以上就是css 如何实现让文字滑入的方式的详细内容,更多请关注其它相关文章!

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4