CSS GRADIENT WAVE @Dr Tech

0 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);}}

Tags

HTML CSS HTML_CSS_WEBSITE

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.