<div class="background">
<div class="water"></div>
</div>
<svg>
<filter id="turbulence"
x="0" y="0"
width="100%" height="100%">
<feTurbulence id="sea-filter"
numOctaves="3"
seed="2"
baseFrequency="0.02 0.05"></feTurbulence>
<feDisplacementMap scale="10"
in="SourceGraphic"></feDisplacementMap>
<animate xlink:href="#sea-filter"
attributeName="baseFrequency"
dur="60s"
keyTimes="0;0.5;1"
values="0.02 0.06;0.04 0.08;0.02 0.06"
repeatCount="indefinite">
</animate>
</svg>
body {
margin: 0;
padding: 0;
width: 100vw;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url("https://images.pexels.com/photos/734973/pexels-photo-734973.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
}
.background .water {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("https://images.pexels.com/photos/734973/pexels-photo-734973.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
filter: url("#turbulence");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.