CSS CLOUDS GRADIENT ANIMATION @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL|...

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

Tags

You May Like

Show more
Home Rings loader Create With HTML And CSS Animation For Responsive Webs...

Home Rings loader Create With HTML And CSS Animation For Responsive Webs...

September 02, 2022
CSS CLOUDS GRADIENT ANIMATION @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL|...

CSS CLOUDS GRADIENT ANIMATION @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL|...

August 07, 2022
CSS HYPNOTIZE ANIMATION BEAUTIFUL @Dr Tech |HTML| |CSS| |WEBSITE| |TUTO...

CSS HYPNOTIZE ANIMATION BEAUTIFUL @Dr Tech |HTML| |CSS| |WEBSITE| |TUTO...

August 06, 2022

Post a Comment

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