设为首页收藏本站
帮助中心勋章中心打赏支持
  • 首页首页 - 青木社区
  • 社区社区 - 青木社区
  • 资讯
  • 圈子
  • 朋友圈
  • 导读
  • 赞助我们
    • 立即注册
    九歌社区»社区 › 资源分享 › 站长资源 › HTML/CSS实现可爱的404动画 很逗的机器人模板源码（附带 ...
    返回列表 发布新帖

    [网站源码] HTML/CSS实现可爱的404动画 很逗的机器人模板源码（附带源码）

    8 0
    发表于 3 天前 | 查看全部 阅读模式
    很久以前我在网上看到一篇帖子，是专门分享创意404页面的，很可惜我已经找不到了。但是今天我找到一款利用HTML5实现的404机器人动画，当你进入该404页面时，就会出现一个机器人在跳舞，非常可爱。这个机器人跳舞的动作是利用HTML5和CSS3的动画属性实现的，一起来看看。

    效果图
    PixPin_2025-02-20_09-05-40.gif

    Html代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>HTML5可爱的404动画 很逗的机器人在线演示</title>

    7. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>

    9. <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

    11. </head>

    13. <body>

    15.   <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">
    16.     <rect x="59.722" y="72.779" fill="#333" width="40.557" height="27.564" />
    17.     <g id="head" class="up">
    18.         <g id="leftAntenna">
    19.             <path fill="none" stroke="#ccc" stroke-width="1.5" stroke-miterlimit="10" d="M77.519,25.869
    20.                 C75.85,13.604,65.745,3.39,53.972,3.39">
    21.                 <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" dur="0.75s" repeatCount="indefinite" values="
    22.                           M77.519,25.869C75.85,13.604,65.745,3.39,53.972,3.39
    23.                           ;
    24.                           M77.519,25.869C75.85,13.604,65.745,3.39,53.972,12
    25.                           ;
    26.                           M77.519,25.869C75.85,13.604,65.745,3.39,53.972,0
    27.                           ;
    28.                           M77.519,25.869C75.85,13.604,65.745,3.39,53.972,3.39
    29.                           " />
    30.             </path>
    31.             <ellipse fill="#ccc" cx="55.021" cy="3.39" rx="3.344" ry="3.391">
    32.                 <animate dur="0.75s" attributeName="cy" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" values="
    33.                            3.39;
    34.                            12;
    35.                            0;
    36.                            3.39
    37.                            " repeatCount="indefinite" />
    38.             </ellipse>
    39.         </g>
    40.         <g id="rightAntenna">
    41.             <path fill="none" stroke="#ccc" stroke-width="1.5" stroke-miterlimit="10" d="M82.48,25.869
    42.                 C84.15,13.604,94.255,3.39,106.028,3.39">
    43.                 <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" dur="0.6s" repeatCount="indefinite" values="
    44.                           M82.48,25.869C84.15,13.604,94.255,3.39,106.028,3.39
    45.                           ;
    46.                           M82.48,25.869C84.15,13.604,94.255,3.39,106.028,10.39
    47.                           ;
    48.                           M82.48,25.869C84.15,13.604,94.255,3.39,106.028,-5.39
    49.                           ;
    50.                           M82.48,25.869C84.15,13.604,94.255,3.39,106.028,3.39
    51.                           " />
    52.             </path>
    53.             <ellipse fill="#ccc" cx="104.979" cy="3.39" rx="3.344" ry="3.391">
    54.                 <animate dur="0.6s" attributeName="cy" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" values="
    55.                            3.39;
    56.                            10.39;
    57.                            -5.39;
    58.                            3.39
    59.                            " repeatCount="indefinite" />
    60.             </ellipse>
    61.         </g>
    62.         <path fill="#333" d="M96.079,32.57v-8.546c-10.72-3.765-21.437-3.98-32.156,0v8.546H96.079z" />
    63.         <path fill="#f54f59" d="M112.809,28.372H80H47.19c-5.814,18.663-5.499,37.322,0,55.983H80h32.811
    64.                 C118.309,65.694,118.625,47.035,112.809,28.372z" />
    65.         <g>
    66.             <g id="eyeLeft">
    67.                 <path fill="#FFFFFF" d="M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853
    68.                                 s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z">
    69.                     <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" begin="5s" dur="0.8s" repeatCount="indefinite" values="
    70.                           M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z
    71.                           ;
    72.                           M72.116,47.955c0,5.443-0.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853s4.044-4.856,9.032-4.856h1.971C68.071,45.099,72.116,42.512,72.116,47.955z
    73.                           ;
    74.                           M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z
    75.                           " />
    76.                 </path>
    77.                 <path d="M66.614,47.955c0,2.176-1.618,3.942-3.613,3.942h-1.807c-1.994,0-3.612-1.766-3.612-3.942
    78.                                 c0-2.178,1.618-3.943,3.612-3.943H63C64.996,44.012,66.614,45.777,66.614,47.955z" />
    79.             </g>
    80.             <g>
    81.                 <path fill="#FFFFFF" d="M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853
    82.                                 s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z">
    83.                     <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" begin="5s" dur="0.8s" repeatCount="indefinite" values="
    84.                           M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z
    85.                           ;
    86.                           M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853s4.045-4.856,9.031-4.856h1.973C103.875,45.099,107.92,42.512,107.92,47.955z
    87.                           ;
    88.                           M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z
    89.                           " />
    90.                 </path>
    91.                 <path d="M102.417,47.955c0,2.176-1.616,3.942-3.612,3.942h-1.807c-1.994,0-3.611-1.766-3.611-3.942
    92.                                 c0-2.178,1.617-3.943,3.611-3.943h1.807C100.801,44.012,102.417,45.777,102.417,47.955z" />
    93.             </g>
    94.         </g>
    95.         <path fill="#FFFFFF" d="M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499c-10.756,0-32.269,0-43.025,0
    96.                 c-1.033,0-1.871-1.118-1.871-2.499c0-1.378,0.838-2.496,1.871-2.496c10.756,0,32.269,0,43.025,0
    97.                 C102.547,67.282,103.383,68.4,103.383,69.778z">
    98.             <animate attributeName="d" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1" begin="0s" dur="1s" repeatCount="indefinite" values="
    99.                           M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499c-10.756,0-32.269,0-43.025,0
    100.                 c-1.033,0-1.871-1.118-1.871-2.499c0-1.378,0.838-2.496,1.871-2.496c10.756,0,32.269,0,43.025,0
    101.                 C102.547,67.282,103.383,68.4,103.383,69.778z
    102.                           ;
    103.                           M103.383,69.778c0,1.381-0.862,2.268-1.871,2.499c-11.669,2.677-29.396,3.207-43.025,0
    104.                 c-1.005-0.236-1.871-1.118-1.871-2.499c0-1.378,0.868-2.249,1.871-2.496c11.349-2.795,31.753-2.53,43.025,0
    105.                 C102.521,67.508,103.383,68.4,103.383,69.778z
    106.                           ;
    107.                           M103.383,69.778c0,1.381-0.86,2.724-1.871,2.499c-11.271-2.506-29.956-2.201-43.025,0
    108.                 c-1.019,0.171-1.871-1.118-1.871-2.499c0-1.378,0.89-2.819,1.871-2.496c15.191,4.995,30.429,3.433,43.025,0
    109.                 C102.511,67.01,103.383,68.4,103.383,69.778z
    110.                           ;
    111.                           M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499c-10.756,0-32.269,0-43.025,0
    112.                 c-1.033,0-1.871-1.118-1.871-2.499c0-1.378,0.838-2.496,1.871-2.496c10.756,0,32.269,0,43.025,0
    113.                 C102.547,67.282,103.383,68.4,103.383,69.778z
    114.                           " />
    115.         </path>
    116.     </g>
    117.     <g id="upperTorso">
    118.         <g id="leftArm">
    119.             <g class="forearm">
    120.                 <path fill="#333" d="M9.068,131.177c-4.78,12.558-5.183,25.372-2.497,40.71c0,0,0.68,4.312,6.107,3.39
    121.                 c4.571-0.776,4.348-5.001,4.348-5.001c-2.351-13.388-2.234-24.244,1.89-35.134c0,0,1.75-4.725-2.833-6.6
    122.                 C11.02,126.471,9.068,131.177,9.068,131.177z" />
    123.                 <path fill="#f54f59" d="M9.604,166.5c-6.984,1.975-11.067,9.316-9.117,16.398c1.008,3.662,3.439,6.522,6.51,8.172
    124.                 c-0.167-0.363-0.315-0.742-0.426-1.141c-1.235-4.484,1.703-9.234,6.562-10.609c4.861-1.377,9.804,1.145,11.037,5.631
    125.                 c0.111,0.396,0.18,0.798,0.221,1.197c1.785-3.021,2.399-6.748,1.393-10.407C23.833,168.661,16.589,164.523,9.604,166.5z" />
    126.             </g>
    127.             <path fill="#333" d="M18.917,135.142c1.731-4.573,4.169-9.151,7.428-13.925c4.23-6.199,7.573-9.281,13.553-13.761
    128.                 c0,0,3.335-2.905,0.961-6.63c-2.797-4.389-7.415-1.908-7.415-1.908c-4.981,3.145-10.421,8.413-15.576,15.872
    129.                 c-3.827,5.537-6.726,10.938-8.8,16.387c0,0-1.877,4.187,2.599,6.24C16.75,139.75,18.917,135.142,18.917,135.142z" />
    130.             <g>
    131.                 <ellipse stroke="#f54f59" cx="13.581" cy="132.93" rx="8.505" ry="8.623" />
    132.                 <g>
    133.                     <path fill="#f54f59" d="M9.299,135.199c1.237,2.396,4.154,3.322,6.52,2.07c2.364-1.252,3.278-4.211,2.042-6.605
    134.                                 c-1.236-2.398-4.152-3.324-6.52-2.072C8.978,129.844,8.065,132.803,9.299,135.199z" />
    135.                 </g>
    136.             </g>
    137.         </g>
    138.         <g id="rightArm">
    139.             <g class="forearm">
    140.                 <path fill="#333" d="M143.916,128.542c-4.583,1.875-2.833,6.6-2.833,6.6c4.124,10.89,4.241,21.746,1.89,35.134
    141.                 c0,0-0.223,4.225,4.348,5.001c5.428,0.922,6.107-3.39,6.107-3.39c2.688-15.338,2.283-28.152-2.496-40.71
    142.                 C150.932,131.177,148.98,126.471,143.916,128.542z" />
    143.                 <path fill="#f54f59" d="M134.216,175.741c-1.006,3.659-0.392,7.386,1.394,10.407c0.041-0.399,0.109-0.801,0.221-1.197
    144.                 c1.232-4.486,6.176-7.008,11.037-5.631c4.859,1.375,7.797,6.125,6.562,10.609c-0.111,0.398-0.26,0.777-0.427,1.141
    145.                 c3.071-1.649,5.502-4.51,6.511-8.172c1.949-7.082-2.134-14.424-9.117-16.398C143.411,164.523,136.167,168.661,134.216,175.741z" />
    146.             </g>
    147.             <path fill="#333" d="M148.333,137.417c4.476-2.054,2.599-6.24,2.599-6.24c-2.074-5.449-4.973-10.85-8.8-16.387
    148.                 c-5.155-7.459-10.595-12.727-15.576-15.872c0,0-4.618-2.48-7.415,1.908c-2.374,3.725,0.961,6.63,0.961,6.63
    149.                 c5.98,4.479,9.323,7.562,13.553,13.761c3.26,4.773,5.697,9.352,7.429,13.925C141.083,135.142,143.25,139.75,148.333,137.417z" />
    150.             <g>
    151.                 <ellipse stroke="#f54f59" cx="146.419" cy="132.93" rx="8.505" ry="8.623" />
    152.                 <g>
    153.                     <path fill="#f54f59" d="M148.659,128.592c-2.368-1.252-5.284-0.326-6.521,2.072c-1.236,2.395-0.322,5.354,2.043,6.605
    154.                                 s5.282,0.326,6.52-2.07C151.936,132.803,151.021,129.844,148.659,128.592z" />
    155.                 </g>
    156.             </g>
    157.         </g>
    158.         <path d="M42.356,94.049l-8.341-1.248c-5.238,10.201-7.014,20.918-4.697,32.248l8.34,1.248L42.356,94.049z" />
    159.         <path d="M122.342,126.297l8.34-1.248c2.317-11.33,0.541-22.047-4.697-32.248l-8.34,1.248L122.342,126.297z" />
    160.         <path fill="#f54f59" d="M125.283,131.334c0.048-13.081-1.633-26.163-5.186-39.244H80H39.903
    161.                 c-3.552,13.081-5.232,26.162-5.184,39.242L125.283,131.334z" />
    162.     </g>
    163.     <g id="lowerTrunk">
    164.         <g id="leftFoot">
    165.             <path fill="#333" d="M61.27,164.817c0-3.526-2.858-6.386-6.385-6.386c-3.527,0-6.386,2.859-6.386,6.386v0.001l0,0l0,36.132
    166.                         c0,3.526,2.859,6.386,6.386,6.386c3.526,0,6.385-2.859,6.385-6.386L61.27,164.817L61.27,164.817L61.27,164.817z" />
    167.             <g class="lowerLeg">
    168.                 <path fill="#333" d="M61.27,200.63c0-3.526-2.858-6.386-6.385-6.386c-3.527,0-6.386,2.859-6.386,6.386v0.001l0,0l0,36.132
    169.                         c0,3.526,2.859,6.386,6.386,6.386c3.526,0,6.385-2.859,6.385-6.386L61.27,200.63L61.27,200.63L61.27,200.63z" />
    170.                 <path fill="#f54f59" d="M54.885,234.096c-9.526,0-17.244,7.119-17.244,15.903H72.13C72.13,241.215,64.41,234.096,54.885,234.096z" />
    171.             </g>
    172.             <g>
    173.                 <ellipse stroke="#f54f59" cx="54.885" cy="200.79" rx="9.294" ry="9.423" />
    174.                 <g>
    175.                     <path fill="#f54f59" d="M60.607,203.823c-1.653,3.202-5.553,4.44-8.715,2.768c-3.163-1.677-4.383-5.628-2.73-8.832
    176.                                         c1.651-3.204,5.556-4.442,8.715-2.771C61.036,196.664,62.258,200.62,60.607,203.823z" />
    177.                 </g>
    178.             </g>
    179.         </g>
    180.         <g id="rightFoot">
    181.             <path fill="#333" d="M98.73,164.817c0-3.526,2.858-6.386,6.385-6.386c3.527,0,6.386,2.859,6.386,6.386v0.001l0,0l0.001,36.132
    182.                         c0,3.526-2.859,6.386-6.387,6.386c-3.525,0-6.385-2.859-6.385-6.386V164.817L98.73,164.817L98.73,164.817z" />
    183.             <g class="lowerLeg">
    184.                 <path fill="#333" d="M98.73,200.63c0-3.526,2.858-6.386,6.385-6.386c3.527,0,6.386,2.859,6.386,6.386v0.001l0,0l0.001,36.132
    185.                         c0,3.526-2.859,6.386-6.387,6.386c-3.525,0-6.385-2.859-6.385-6.386V200.63L98.73,200.63L98.73,200.63z" />
    186.                 <path fill="#f54f59" d="M87.87,249.999h34.489c0-8.784-7.719-15.903-17.244-15.903S87.87,241.215,87.87,249.999z" />
    187.             </g>
    188.             <g>
    189.                 <ellipse stroke="#f54f59" cx="105.115" cy="200.79" rx="9.294" ry="9.423" />
    190.                 <g>
    191.                     <path fill="#f54f59" d="M102.123,194.988c3.159-1.672,7.064-0.434,8.715,2.771c1.653,3.204,0.434,7.155-2.73,8.832
    192.                                         c-3.162,1.673-7.062,0.435-8.715-2.768C97.742,200.62,98.964,196.664,102.123,194.988z" />
    193.                 </g>
    194.             </g>
    195.         </g>
    196.         <path fill="#f7727a" d="M34.719,131.334c0.048,13.082,1.824,26.164,5.184,39.246H80h40.098c3.361-13.08,5.138-26.162,5.186-39.244L34.719,131.334z" />
    197.     </g>
    198. </svg>


    201. <div class="col">
    202.   <h1>404</h1>
    203.   <p>SOVOG配置问题……</p>
    204. </div>

    206. </body>
    207. </html>
    复制代码


    CSS样式
    1. svg#robot {
    2.   display: block;
    3.   position: relative;
    4.   margin: 6em auto 0 auto;
    5.   padding: 10px;
    6.   -webkit-transform-origin: bottom;
    7.   -ms-transform-origin: bottom;
    8.   transform-origin: bottom;
    9.   -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    10.   -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    11.   transform: rotate(0deg) translate3d(0px, 0px, 0px);
    12.   -webkit-animation: move 2s ease infinite;
    13.   animation: move 2s ease infinite;
    14. }

    16. @-webkit-keyframes move {
    17.   0%, 100% {
    18.     -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    19.     transform: rotate(0deg) translate3d(0px, 0px, 0px);
    20.   }

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

    27.   75% {
    28.     -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
    29.     transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
    30.   }
    31. }

    33. @keyframes move {
    34.   0%, 100% {
    35.     -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    36.     transform: rotate(0deg) translate3d(0px, 0px, 0px);
    37.   }

    39.   25% {
    40.     -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px);
    41.     transform: rotate(5deg) translate3d(5px, 5px, 0px);
    42.   }

    44.   75% {
    45.     -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
    46.     transform: rotate(-6deg) translate3d(-5px, 5px, 0px);
    47.   }
    48. }
    49. g#head {
    50.   -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    51.   -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    52.   transform: rotate(0deg) translate3d(0px, 0px, 0px);
    53.   -webkit-transform-origin: bottom center;
    54.   -ms-transform-origin: bottom center;
    55.   transform-origin: bottom center;
    56.   -webkit-animation: head 1s 1s ease infinite;
    57.   animation: head 1s 1s ease infinite;
    58. }
    59. g#head #leftAntenna > ellipse, g#head #rightAntenna > ellipse {
    60.   -webkit-animation: color 350ms linear infinite;
    61.   animation: color 350ms linear infinite;
    62. }

    64. @-webkit-keyframes head {
    65.   0%, 46%, 50%, 55%, 100% {
    66.     -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    67.     transform: rotate(0deg) translate3d(0px, 0px, 0px);
    68.   }

    70.   49% {
    71.     -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px);
    72.     transform: rotate(20deg) translate3d(0px, 0px, 0px);
    73.   }

    75.   51% {
    76.     -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px);
    77.     transform: rotate(-10deg) translate3d(0px, 0px, 0px);
    78.   }
    79. }

    81. @keyframes head {
    82.   0%, 46%, 50%, 55%, 100% {
    83.     -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    84.     transform: rotate(0deg) translate3d(0px, 0px, 0px);
    85.   }

    87.   49% {
    88.     -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px);
    89.     transform: rotate(20deg) translate3d(0px, 0px, 0px);
    90.   }

    92.   51% {
    93.     -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px);
    94.     transform: rotate(-10deg) translate3d(0px, 0px, 0px);
    95.   }
    96. }
    97. @-webkit-keyframes color {
    98.   0%, 100% {
    99.     fill: #ccc;
    100.   }

    102.   50% {
    103.     fill: red;
    104.   }
    105. }
    106. @keyframes color {
    107.   0%, 100% {
    108.     fill: #ccc;
    109.   }

    111.   50% {
    112.     fill: red;
    113.   }
    114. }
    115. #upperTorso {
    116.   -webkit-transform: rotate(0deg);
    117.   -ms-transform: rotate(0deg);
    118.   transform: rotate(0deg);
    119.   -webkit-transform-origin: center;
    120.   -ms-transform-origin: center;
    121.   transform-origin: center;
    122.   -webkit-animation: torso 600ms 1s ease infinite;
    123.   animation: torso 600ms 1s ease infinite;
    124. }
    125. #upperTorso #leftArm {
    126.   -webkit-transform: rotate(0deg);
    127.   -ms-transform: rotate(0deg);
    128.   transform: rotate(0deg);
    129.   -webkit-transform-origin: 80% 5%;
    130.   -ms-transform-origin: 80% 5%;
    131.   transform-origin: 80% 5%;
    132.   -webkit-animation: left 1s ease infinite;
    133.   animation: left 1s ease infinite;
    134. }
    135. #upperTorso #leftArm .forearm {
    136.   -webkit-transform: rotate(0deg);
    137.   -ms-transform: rotate(0deg);
    138.   transform: rotate(0deg);
    139.   -webkit-transform-origin: 68% 10%;
    140.   -ms-transform-origin: 68% 10%;
    141.   transform-origin: 68% 10%;
    142.   -webkit-animation: forearm 800ms 1s ease infinite;
    143.   animation: forearm 800ms 1s ease infinite;
    144. }
    145. #upperTorso #rightArm {
    146.   -webkit-transform: rotate(0deg);
    147.   -ms-transform: rotate(0deg);
    148.   transform: rotate(0deg);
    149.   -webkit-transform-origin: 18% 0%;
    150.   -ms-transform-origin: 18% 0%;
    151.   transform-origin: 18% 0%;
    152.   -webkit-animation: right 1s ease infinite;
    153.   animation: right 1s ease infinite;
    154. }
    155. #upperTorso #rightArm .forearm {
    156.   -webkit-transform: rotate(0deg);
    157.   -ms-transform: rotate(0deg);
    158.   transform: rotate(0deg);
    159.   -webkit-transform-origin: 68% 10%;
    160.   -ms-transform-origin: 68% 10%;
    161.   transform-origin: 68% 10%;
    162.   -webkit-animation: forearm 700ms 1s ease infinite;
    163.   animation: forearm 700ms 1s ease infinite;
    164. }

    166. @-webkit-keyframes torso {
    167.   40%, 50%, 60% {
    168.     -webkit-transform: rotate(0deg);
    169.     transform: rotate(0deg);
    170.   }

    172.   45% {
    173.     -webkit-transform: rotate(5deg);
    174.     transform: rotate(5deg);
    175.   }

    177.   55% {
    178.     -webkit-transform: rotate(-5deg);
    179.     transform: rotate(-5deg);
    180.   }
    181. }

    183. @keyframes torso {
    184.   40%, 50%, 60% {
    185.     -webkit-transform: rotate(0deg);
    186.     transform: rotate(0deg);
    187.   }

    189.   45% {
    190.     -webkit-transform: rotate(5deg);
    191.     transform: rotate(5deg);
    192.   }

    194.   55% {
    195.     -webkit-transform: rotate(-5deg);
    196.     transform: rotate(-5deg);
    197.   }
    198. }
    199. @-webkit-keyframes left {
    200.   60% {
    201.     -webkit-transform: rotate(100deg);
    202.     transform: rotate(100deg);
    203.   }
    204. }
    205. @keyframes left {
    206.   60% {
    207.     -webkit-transform: rotate(100deg);
    208.     transform: rotate(100deg);
    209.   }
    210. }
    211. @-webkit-keyframes right {
    212.   50% {
    213.     -webkit-transform: rotate(-70deg);
    214.     transform: rotate(-70deg);
    215.   }
    216. }
    217. @keyframes right {
    218.   50% {
    219.     -webkit-transform: rotate(-70deg);
    220.     transform: rotate(-70deg);
    221.   }
    222. }
    223. @-webkit-keyframes forearm {
    224.   0%, 30%, 50%, 70%, 100% {
    225.     -webkit-transform: rotate(0deg);
    226.     transform: rotate(0deg);
    227.   }

    229.   40% {
    230.     -webkit-transform: rotate(25deg);
    231.     transform: rotate(25deg);
    232.   }

    234.   60% {
    235.     -webkit-transform: rotate(-25deg);
    236.     transform: rotate(-25deg);
    237.   }
    238. }
    239. @keyframes forearm {
    240.   0%, 30%, 50%, 70%, 100% {
    241.     -webkit-transform: rotate(0deg);
    242.     transform: rotate(0deg);
    243.   }

    245.   40% {
    246.     -webkit-transform: rotate(25deg);
    247.     transform: rotate(25deg);
    248.   }

    250.   60% {
    251.     -webkit-transform: rotate(-25deg);
    252.     transform: rotate(-25deg);
    253.   }
    254. }
    255. #lowerTrunk {
    256.   -webkit-transform: rotate(0deg);
    257.   -ms-transform: rotate(0deg);
    258.   transform: rotate(0deg);
    259.   -webkit-transform-origin: 60% 5%;
    260.   -ms-transform-origin: 60% 5%;
    261.   transform-origin: 60% 5%;
    262.   -webkit-animation: lowerTrunk 1s ease infinite;
    263.   animation: lowerTrunk 1s ease infinite;
    264. }

    266. @-webkit-keyframes lowerTrunk {
    267.   0%, 100% {
    268.     -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    269.     transform: rotate(0deg) translate3d(0px, 0px, 0px);
    270.   }

    272.   25% {
    273.     -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px);
    274.     transform: rotate(2deg) translate3d(2px, 0px, 0px);
    275.   }

    277.   75% {
    278.     -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
    279.     transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
    280.   }
    281. }

    283. @keyframes lowerTrunk {
    284.   0%, 100% {
    285.     -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
    286.     transform: rotate(0deg) translate3d(0px, 0px, 0px);
    287.   }

    289.   25% {
    290.     -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px);
    291.     transform: rotate(2deg) translate3d(2px, 0px, 0px);
    292.   }

    294.   75% {
    295.     -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
    296.     transform: rotate(-2deg) translate3d(-2px, 0px, 0px);
    297.   }
    298. }
    299. #leftFoot {
    300.   -webkit-transform: rotate(0deg);
    301.   -ms-transform: rotate(0deg);
    302.   transform: rotate(0deg);
    303.   -webkit-transform-origin: 60% 5%;
    304.   -ms-transform-origin: 60% 5%;
    305.   transform-origin: 60% 5%;
    306.   -webkit-animation: leftFoot 2s ease infinite;
    307.   animation: leftFoot 2s ease infinite;
    308. }
    309. #leftFoot > .lowerLeg {
    310.   -webkit-transform: rotate(0deg);
    311.   -ms-transform: rotate(0deg);
    312.   transform: rotate(0deg);
    313.   -webkit-transform-origin: 68% 10%;
    314.   -ms-transform-origin: 68% 10%;
    315.   transform-origin: 68% 10%;
    316.   -webkit-animation: lowerLeg 2s ease infinite;
    317.   animation: lowerLeg 2s ease infinite;
    318. }

    320. @-webkit-keyframes leftFoot {
    321.   0%, 50% {
    322.     -webkit-transform: rotate(0deg);
    323.     transform: rotate(0deg);
    324.   }

    326.   25% {
    327.     -webkit-transform: rotate(70deg);
    328.     transform: rotate(70deg);
    329.   }
    330. }

    332. @keyframes leftFoot {
    333.   0%, 50% {
    334.     -webkit-transform: rotate(0deg);
    335.     transform: rotate(0deg);
    336.   }

    338.   25% {
    339.     -webkit-transform: rotate(70deg);
    340.     transform: rotate(70deg);
    341.   }
    342. }
    343. @-webkit-keyframes lowerLeg {
    344.   0%, 50% {
    345.     -webkit-transform: rotate(0deg);
    346.     transform: rotate(0deg);
    347.   }

    349.   8%, 14% {
    350.     -webkit-transform: rotate(-15deg);
    351.     transform: rotate(-15deg);
    352.   }

    354.   11%, 18% {
    355.     -webkit-transform: rotate(15deg);
    356.     transform: rotate(15deg);
    357.   }
    358. }
    359. @keyframes lowerLeg {
    360.   0%, 50% {
    361.     -webkit-transform: rotate(0deg);
    362.     transform: rotate(0deg);
    363.   }

    365.   8%, 14% {
    366.     -webkit-transform: rotate(-15deg);
    367.     transform: rotate(-15deg);
    368.   }

    370.   11%, 18% {
    371.     -webkit-transform: rotate(15deg);
    372.     transform: rotate(15deg);
    373.   }
    374. }
    375. #rightFoot {
    376.   -webkit-transform: rotate(0deg);
    377.   -ms-transform: rotate(0deg);
    378.   transform: rotate(0deg);
    379.   -webkit-transform-origin: 50% 5%;
    380.   -ms-transform-origin: 50% 5%;
    381.   transform-origin: 50% 5%;
    382.   -webkit-animation: rightFoot 2s ease infinite;
    383.   animation: rightFoot 2s ease infinite;
    384. }
    385. #rightFoot > .lowerLeg {
    386.   -webkit-transform: rotate(0deg);
    387.   -ms-transform: rotate(0deg);
    388.   transform: rotate(0deg);
    389.   -webkit-transform-origin: 68% 10%;
    390.   -ms-transform-origin: 68% 10%;
    391.   transform-origin: 68% 10%;
    392.   -webkit-animation: lowerLegIz 2s ease infinite;
    393.   animation: lowerLegIz 2s ease infinite;
    394. }

    396. @-webkit-keyframes rightFoot {
    397.   75% {
    398.     -webkit-transform: rotate(-60deg);
    399.     transform: rotate(-60deg);
    400.   }

    402.   50%, 100% {
    403.     -webkit-transform: rotate(0deg);
    404.     transform: rotate(0deg);
    405.   }
    406. }

    408. @keyframes rightFoot {
    409.   75% {
    410.     -webkit-transform: rotate(-60deg);
    411.     transform: rotate(-60deg);
    412.   }

    414.   50%, 100% {
    415.     -webkit-transform: rotate(0deg);
    416.     transform: rotate(0deg);
    417.   }
    418. }
    419. @-webkit-keyframes lowerLegIz {
    420.   50%, 100% {
    421.     -webkit-transform: rotate(0deg);
    422.     transform: rotate(0deg);
    423.   }

    425.   60%, 70% {
    426.     -webkit-transform: rotate(15deg);
    427.     transform: rotate(15deg);
    428.   }

    430.   65%, 85% {
    431.     -webkit-transform: rotate(-15deg);
    432.     transform: rotate(-15deg);
    433.   }
    434. }
    435. @keyframes lowerLegIz {
    436.   50%, 100% {
    437.     -webkit-transform: rotate(0deg);
    438.     transform: rotate(0deg);
    439.   }

    441.   60%, 70% {
    442.     -webkit-transform: rotate(15deg);
    443.     transform: rotate(15deg);
    444.   }

    446.   65%, 85% {
    447.     -webkit-transform: rotate(-15deg);
    448.     transform: rotate(-15deg);
    449.   }
    450. }
    451. html {
    452.   -webkit-font-smoothing: antialiased;
    453.   -moz-osx-font-smoothing: grayscale;
    454.   text-rendering: optimizelegibility;
    455. }

    457. html,
    458. body {
    459.   width: 100%;
    460.   height: 100%;
    461.   overflow: hidden;
    462. }

    464. body {
    465.   background: #404853;
    466.   font-family: 'Roboto Condensed', sans-serif;
    467. }

    469. .col {
    470.   text-align: center;
    471. }
    472. .col h1 {
    473.   text-shadow: 0 3px 0px #404853, 0 6px 0px #333333;
    474.   color: #f54f59;
    475.   font-size: 6em;
    476.   font-weight: 700;
    477.   line-height: 0.6em;
    478. }
    479. .col p {
    480.   color: #ccc;
    481.   font-family: monospace;
    482.   font-size: 0.95em;
    483.   font-weight: 300;
    484.   line-height: 7em;
    485. }
    复制代码
    赏 微信 支付宝

    如果文章对您有帮助，欢迎打赏作者!

    免责声明

    本社区仅提供信息交流平台，帖子内容由用户自行发布，不代表社区立场。用户对发布内容负全责，包括版权、隐私、诽谤等，社区不承担因使用社区内容导致的损失。禁止发布侵权、隐私信息，发现侵权请联系我们。社区不负责第三方内容，用户因访问第三方内容产生的损失，社区不担责。用户须遵守规则和法律，不得发布违法、不当内容，违规内容将被删除。发表帖子即同意本声明，不同意请勿发帖。


    特别提醒：网络空间并非法外之地，请广大用户自觉遵守法律法规，共同营造健康、文明、有序的网络环境。

    本社区运营团队

    联系我们： 如有疑问或发现违规行为，请联系管理员：kefu@foxccs.com

    远方路灯明灭，银河倾斜，一斛星斗洒满天街。
    回复

    使用道具 举报

    返回列表 发布新帖

    回复
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    玄之实名认证
    Lv.9 管理员
    主题

    211

    		 回帖

    8

    		 积分

    811
    + 关注 发消息

    💡 Tips：

    关于我们

    关于我们 站点统计 新闻动态 联系我们

    服务支持

    社区监狱 排行榜单 封禁类型 售后服务
    投诉/建议联系

    foxccs@qq.com

    网站内容来源于网络，版权争议与本站无关。
    请在下载后的24小时内从您的设备中彻底删除上述内容。
    • QQ交流群
    • 添加微信客服
    Copyright © 2004-2025 九歌社区 版权所有 All Rights Reserved.
    关灯 在本版发帖
    扫一扫添加微信客服
     官方QQ交流群
    手机扫一扫访问
     返回顶部
    快速回复 返回顶部 返回列表