html怎么将文字横排,css 如何实现让文字滑入的方式

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;}

}

效果图：