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

将鼠标移至此处
滚粗来了

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 Johan

    懒到没有写IE的码…

    四月 13, 2014 13:58:17
  2. 板 凳 林木木

    可以来得更猛烈些~~

    四月 13, 2014 20:27:03
  3. 地 板 619影视

    这个功能好玩

    四月 14, 2014 00:20:03
  4. 地 毯 郑永

    很不错的效果,呵呵 :)玩代码对你来说,像是玩游戏。

    四月 14, 2014 01:38:02
  5. 地 面 麦田一根葱

    IE掉血了

    四月 14, 2014 08:57:30
  6. 地 下 史达林

    蝴蝶姐你造吗?我的网站突然就有口碑了:http://koubei.baidu.com/s/www.ragnaroks.org
    最近更新比较猛烈的关系??

    四月 14, 2014 16:59:31
  7. 7 楼 Johan

    我似乎发现了一个有意思的事情。
    如果我把鼠标放在meta ribbon的圆弧边缘,它会自动地做上下活塞运动~
    哈哈哈哈~

    四月 20, 2014 12:32:25
  8. 8 楼 坊子帮

    “滚粗来了”

    四月 22, 2014 14:09:00
  9. 9 楼 SketchupPro

    老乡你好!

    四月 26, 2014 17:46:15
  10. 10 楼 上邪

    侧边栏的最新评论里的评论内容都到头像上去了= =|||

    四月 28, 2014 10:05:57