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

    作者: LMS

    天行贱,君子自强自息。

    标签

    《Chrome下,css3让你的链接“微微发抖”》有6个想法

    发表评论

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