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;
      animation: lowerLeg 2s ease infinite;
    }
    
    @-webkit-keyframes leftFoot {
      0%, 50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      25% {
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg);
      }
    }
    
    @keyframes leftFoot {
      0%, 50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      25% {
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg);
      }
    }
    @-webkit-keyframes lowerLeg {
      0%, 50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      8%, 14% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
      }
    
      11%, 18% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
    }
    @keyframes lowerLeg {
      0%, 50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      8%, 14% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
      }
    
      11%, 18% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
    }
    #rightFoot {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: 50% 5%;
      -ms-transform-origin: 50% 5%;
      transform-origin: 50% 5%;
      -webkit-animation: rightFoot 2s ease infinite;
      animation: rightFoot 2s ease infinite;
    }
    #rightFoot > .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: lowerLegIz 2s ease infinite;
      animation: lowerLegIz 2s ease infinite;
    }
    
    @-webkit-keyframes rightFoot {
      75% {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
      }
    
      50%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
    
    @keyframes rightFoot {
      75% {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
      }
    
      50%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
    @-webkit-keyframes lowerLegIz {
      50%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      60%, 70% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
    
      65%, 85% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
      }
    }
    @keyframes lowerLegIz {
      50%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    
      60%, 70% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
      }
    
      65%, 85% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
      }
    }
    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizelegibility;
    }
    
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    body {
      background: #404853;
      font-family: 'Roboto Condensed', sans-serif;
    }
    
    .col {
      text-align: center;
    }
    .col h1 {
      text-shadow: 0 3px 0px #404853, 0 6px 0px #333333;
      color: #f54f59;
      font-size: 6em;
      font-weight: 700;
      line-height: 0.6em;
    }
    .col p {
      color: #ccc;
      font-family: monospace;
      font-size: 0.95em;
      font-weight: 300;
      line-height: 7em;
    }
    </style>

</head>

<body>

    <svg id="robot" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="320px" height="300px" viewBox="0 0 160 300" enable-background="new 0 0 320 300" xml:space="preserve">
    <rect x="59.722" y="72.779" fill="#333" width="40.557" height="27.564" />
    <g id="head" class="up">
        <g id="leftAntenna">
            <path fill="none" stroke="#ccc" stroke-width="1.5" stroke-miterlimit="10" d="M77.519,25.869
		C75.85,13.604,65.745,3.39,53.972,3.39">
                <animate attributeName="d" calcMode="spline" keySplines="0.42 0.........完整代码请登录后点击上方下载按钮下载查看