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%;
 .........完整代码请登录后点击上方下载按钮下载查看