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

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了,你也可以试试,比如让你博客侧边的标签云栏目里的标签微微喘息,就像我的博客右边侧边栏标签云下的那样。

    THE END

    评论 6

    1. 🏅

      额,一下子变成生物了 :???:

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

    2. 🏅

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

    发表评论

    幸会!