CSS CLOUDS GRADIENT ANIMATION @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL|...
HTML And CSS Cooding
August 07, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
<animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="#ff0" />
<stop offset="100%" stop-color="#ff00" />
</radialGradient>
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
<animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="#0ff" />
<stop offset="100%" stop-color="#0ff0" />
</radialGradient>
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
<animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
<stop offset="0%" stop-color="#f0f" />
<stop offset="100%" stop-color="#f0f0" />
</radialGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
<animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
<animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite" />
</rect>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
<animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
<animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite" />
</rect>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
<animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
<animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite" />
</rect>
</svg>
<h1>
Clouds<br /> of æther.
</h1>
</body>
</html>
CSS SOURCE CODE
@import url("https://fonts.googleapis.com/css?family=Libre+Franklin:400,700&subset=latin");
body {
min-height: 100vh;
display: grid;
grid: 100vh/1fr;
place-items: center;}
h1 {
font: 10vmin/0.8 "Libre Franklin";
font-weight: 700;
letter-spacing: -0.05em;
color: #fff4;
text-shadow: 0 0 5px #fff;
mix-blend-mode: overlay;}
svg {position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;}
