利用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);
}
}