CSS GRADIENT WAVE @Dr Tech
HTML And CSS Cooding
July 30, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</body>
</html>
CSS SOURCE CODE
body {
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
overflow: auto;
background: linear-gradient(315deg, darkred 3%, greenyellow 38%, darkblue 68%, orange 98%);
animation: gradient 15s ease infinite;
background-size: 400% 400%;
background-attachment: fixed;}
@keyframes gradient {
{background-position: 0% 0%;}
50%
{background-position: 00% 100%;}
100%
{background-position: 0% 0%;}}
.wave {
background: rgb(255 255 155 / 25%);
border-radius: 1000% 1000% 0 0;
position: fixed;
width: 200%;
height: 12em;
animation: wave 10s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
bottom: 0;
left: 0;
z-index: -1;}
.wave:nth-of-type(2) {
bottom: -1.25em;
animation: wave 18s linear reverse infinite;
opacity: 0.8;}
.wave:nth-of-type(3) {
bottom: -2.5em;
animation: wave 20s -1s reverse infinite;
opacity: 0.9;}
@keyframes wave {
2%
{transform: translateX(1);}
25%
{transform: translateX(-25%);}
50%
{transform: translateX(-50%);}
75%
{transform: translateX(-25%);}
100%
{transform: translateX(1);}}
