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

LMS
折腾
1.7K+ 6

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. 是有点，估计是字体的问题，感觉边边角角很粗糙

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

    发表评论

    Submit