CSS3文字横向滑入效果

论文初稿刚写完, 闲来随便码点代码, 防止手生了.

CSS

   /**
* css3 horizontal slide
* coder:
* 2014-04-12
*/

#slidemeta { display: none; right:0; position: absolute; font-size: 14px; color: #ccc; 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;} }

HTML

<h1><div id="slidemeta">文字</div><h1>

DEMO

将鼠标移至此处
滚粗来了
36 Comments

Name *

E-mail *

Website

  1. 欧美大图吧

    好久没来过了~~

  2. 个人博客

    过来看看博主了,端午节过得可好?

  3. 陌小雨

    真的滚出来啦,haha

  4. 慢鸟

    话说网站真的是好简单