HTML5可爱的404页面动画 很逗的机器人

利用HTML5绘制的机器人,还会动哦。你可以将它作为一个富有创意的404页面。

核心CSS3代码:

@-webkit-keyframes move {
  0%, 100% {
    -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    transform: rotate(0deg) translate3d(0px, 0px, 0px);
  }

  25% {
    -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
    transform: rotate(5deg) translate3d(5px, 5px, 0px);
  }

  75% {
    -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
    transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
  }
}

@keyframes move {
  0%, 100% {
    -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    transform: rotate(0deg) translate3d(0px, 0px, 0px);
  }

  25% {
    -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
    transform: rotate(5deg) translate3d(5px, 5px, 0px);
  }

  75% {
    -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
    transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
  }
}

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-1