The effect

The principle of

The CSS water ripple implementation uses the border-radius property to construct an irregular shape that is close to a circle, and then uses animation to rotate it continuously around the Z-axis to achieve a visual effect of wave motion.

implementation

<! DOCTYPEhtml>
<html>
<head>
  <title>Water ripple effect</title>
  <style type="text/css">
      body {
          margin: 0;
          padding: 0;
          min-height: 100vh;
          position: relative;
          background-color: rgb(118.218.255);
          overflow: hidden;
      }
      body::before.body::after {
          content: ' ';
          position: absolute;
          bottom: 15vh;
          min-width: 300vw;
          min-height: 300vw;
          background-color: #FFFFFF;
          animation: rote 10s linear infinite;
      }
      body::before {
          left: -95%;
          border-radius: 45%;
          opacity:.5;
      }
      body::after {
          left: -95%;
          border-radius: 46%;
      }
      @keyframes rote {
          from {
              transform: rotateZ(0);
          }
          to {
              transform: rotateZ(360deg); }}</style>
</head>
<body></body>
</html>
Copy the code

I only make a brief note here, more details can be found in the link