Press "Enter" to skip to content

Chrome下,css3让你的链接“微微发抖”

Last updated on 2013年04月25日

CSS3的神奇让人震撼,唯一遗憾的是,即使在高级浏览器中,有些功能也不是被普遍支持的,下面我遇到的这个看上去像flash制作出来的“微微发抖”的功能好像只支持webkit核心的浏览器,比如谷歌的chrome。如果你是谷歌浏览器,你看到的下面这些链接应该是像在呼吸一样的“微微发抖”着。

  • 不亦乐乎
  • 呼吸
  • 避孕药
  • 实名制
  • 下面是代码,代码很简单,css部分:

    .entry li{
    display:inline-block;
    position:relative;
    margin-right:10px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: x-spin 4s infinite linear;}
    @-webkit-keyframes x-spin { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.9); }100% { -webkit-transform: scale(1); }
    }
    

    其他部分:

    <li><a>不亦乐乎</a></li>
    <li><a>呼吸</a></li>
    <li><a>避孕药</a></li>
    <li><a>实名制</a></li>
    

    OK了,你也可以试试,比如让你博客侧边的标签云栏目里的标签微微喘息,就像我的博客右边侧边栏标签云下的那样。

    6 Comments

    1. anran
      anran 2011年12月30日

      还是要学习的 现在连css都看不懂了

      • LMS
        LMS 2011年12月31日

        @Ansonyi 是有点,估计是字体的问题,感觉边边角角很粗糙

    2. wugee
      wugee 2012年01月13日

      额,一下子变成生物了 😕

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注