div内容横排 html_css如何让文字横向滑入？

css如何让文字横向滑入？下面本篇文章给大家介绍一下使用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的相关知识，可访问：web前端自学！!