image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="utf-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1">
    8.     <title>wave 波浪 from 图灵机器人官网</title>
    10.     <style>
    11.         #scene {
    12.             width: 100%;
    13.             height: 460px;
    14.             background: -webkit-gradient(linear, left top, right top, from(#00a3f0), color-stop(#3cccfb), to(#55deff));
    15.             background: linear-gradient(90deg, #00a3f0, #3cccfb, #55deff);
    16.             position: relative;
    17.         }
    19.         .water {
    20.             position: absolute;
    21.             bottom: 0;
    22.             left: 0;
    23.             z-index: 1;
    24.             width: 100%;
    25.             height: 164px;
    26.             background: url("water.png") repeat-x 5% 0;
    27.             -webkit-animation: waterMove-data-v-53f85df6 16s linear infinite;
    28.             animation: waterMove-data-v-53f85df6 16s linear infinite;
    29.         }
    31.         @-webkit-keyframes waterMove-data-v-53f85df6 {
    32.             from {
    33.                 background-position: 0% 0%;
    34.             }
    35.             to {
    36.                 background-position: 600% 0%;
    37.             }
    38.         }
    40.         @keyframes waterMove-data-v-53f85df6 {
    41.             from {
    42.                 background-position: 0% 0%;
    43.             }
    44.             to {
    45.                 background-position: 600% 0%;
    46.             }
    47.         }
    48.     </style>
    49. </head>
    51. <body>
    52.     <div id="scene">
    53.         <div class="water">
    55.         </div>
    56.     </div>
    58. </body>
    60. </html>