image.png

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