css+svg实现卡通可爱机器人404页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：css+svg实现卡通可爱机器人404页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
    <style>
        svg#robot {
      display: block;
      position: relative;
      margin: 6em auto 0 auto;
      padding: 10px;
      -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
      transform-origin: bottom;
      -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
      -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px);
      transform: rotate(0deg) translate3d(0px, 0px, 0px);
      -webkit-animation: move 2s ease infinite;
      animation: move 2s ease infinite;
    }
    
    @-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);
      }
    }
    g#head {
      -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
      -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px);
      transform: rotate(0deg) translate3d(0px, 0px, 0px);
      -webkit-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
      transform-origin: bottom center;
      -webkit-animation: head 1s 1s ease infinite;
      animation: head 1s 1s ease infinite;
    }
    g#head #leftAntenna > ellipse, g#head #rightAntenna > ellipse {
      -webkit-animation: color 350ms linear infinite;
      animation: color 350ms linear infinite;
    }
    
    @-webkit-keyframes head {
      0%, 46%, 50%, 55%, 100% {
        -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
        transform: rotate(0deg) translate3d(0px, 0px, 0px);
      }
    
      49% {
        -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px);
        transform: rotate(20deg) translate3d(0px, 0px, 0px);
      }
    
      51% {
        -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px);
        transform: rotate(-10deg) translate3d(0px, 0px, 0px);
      }
    }
    
    @keyframes head {
      0%, 46%, 50%, 55%, 100% {
        -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
        transform: rotate(0deg) translate3d(0px, 0px, 0px);
      }
    
      49% {
        -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px);
        transform: rotate(20deg) translate3d(0px, 0px, 0px);
      }
    
      51% {
        -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px);
        transform: rotate(-10deg) translate3d(0px, 0px, 0px);
      }
    }
    @-webkit-keyframes color {
      0%, 100% {
        fill: #ccc;
      }
    
      50% {
        fill: red;
      }
    }
    @keyframes color {
      0%, 100% {
        fill: #ccc;
      }
    
      50% {
        fill: red;
      }
    }
    #upperTorso {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: center;
      -ms-transform-origin: center;
      transform-origin: center;
      -webkit-animation: torso 600ms 1s ease infinite;
      animation: torso 600ms 1s ease infinite;
    }
    #upperTorso #leftArm {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 80% 5%;
      -ms-transform-origin: 80% 5%;
      transform-origin: 80% 5%;
      -webkit-animation: left 1s ease infinite;
      animation: left 1s ease infinite;
    }
    #upperTorso #leftArm .forearm {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 68% 10%;
      -ms-transform-origin: 68% 10%;
      transform-origin: 68% 10%;
      -webkit-animation: forearm 800ms 1s ease infinite;
      animation: forearm 800ms 1s ease infinite;
    }
    #upperTorso #rightArm {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 18% 0%;
      -ms-transform-origin: 18% 0%;
      transform-origin: 18% 0%;
      -webkit-animation: right 1s ease infinite;
      animation: right 1s ease infinite;
    }
    #upperTorso #rightArm .forearm {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 68% 10%;
      -ms-transform-origin: 68% 10%;
      transform-origin: 68% 10%;
      -webkit-animation: forearm 700ms 1s ease infinite;
      animation: forearm 700ms 1s ease infinite;
    }
    
    @-webkit-keyframes torso {
      40%, 50%, 60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      45% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
      }
    
      55% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
      }
    }
    
    @keyframes torso {
      40%, 50%, 60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      45% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
      }
    
      55% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
      }
    }
    @-webkit-keyframes left {
      60% {
        -webkit-transform: rotate(100deg);
        transform: rotate(100deg);
      }
    }
    @keyframes left {
      60% {
        -webkit-transform: rotate(100deg);
        transform: rotate(100deg);
      }
    }
    @-webkit-keyframes right {
      50% {
        -webkit-transform: rotate(-70deg);
        transform: rotate(-70deg);
      }
    }
    @keyframes right {
      50% {
        -webkit-transform: rotate(-70deg);
        transform: rotate(-70deg);
      }
    }
    @-webkit-keyframes forearm {
      0%, 30%, 50%, 70%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      40% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
    
      60% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
      }
    }
    @keyframes forearm {
      0%, 30%, 50%, 70%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      40% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
    
      60% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
      }
    }
    #lowerTrunk {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 60% 5%;
      -ms-transform-origin: 60% 5%;
      transform-origin: 60% 5%;
      -webkit-animation: lowerTrunk 1s ease infinite;
      animation: lowerTrunk 1s ease infinite;
    }
    
    @-webkit-keyframes lowerTrunk {
      0%, 100% {
        -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
        transform: rotate(0deg) translate3d(0px, 0px, 0px);
      }
    
      25% {
        -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px);
        transform: rotate(2deg) translate3d(2px, 0px, 0px);
      }
    
      75% {
        -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
        transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
      }
    }
    
    @keyframes lowerTrunk {
      0%, 100% {
        -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
        transform: rotate(0deg) translate3d(0px, 0px, 0px);
      }
    
      25% {
        -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px);
        transform: rotate(2deg) translate3d(2px, 0px, 0px);
      }
    
      75% {
        -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
        transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
      }
    }
    #leftFoot {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 60% 5%;
      -ms-transform-origin: 60% 5%;
      transform-origin: 60% 5%;
      -webkit-animation: leftFoot 2s ease infinite;
      animation: leftFoot 2s ease infinite;
    }
    #leftFoot > .lowerLeg {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 68% 10%;
      -ms-transform-origin: 68% 10%;
      transform-origin: 68% 10%;
      -webkit-animation: lowerLeg 2s ease infinite;
      animat.........完整代码请登录后点击上方下载按钮下载查看