Animatie. Salut, de aici poți descărca script-uri HTML și CSS total gratuit. Pentru astăzi am pregătit un efect de background animat. Sper sa iti placa.

Pentru început adaugă urmatoarele rânduri într-un fișier HTML:

<!DOCTYPE html>
<html>
<head>
<title>Animated Crystal Background CSS Animation Effects</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<meta charset=”utf-8″>
</head>
<body>
<section></section>
</body>
</html>

Citeste si: Script-uri HTML|CSS: Efect de Loading Text.

După aceea, intr-un fișier CSS adăugați următoarele:

body {
margin: 0;
padding: 0;
}

section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #3f51b5, #00bcd4);
animation: animate 20s linear infinite;

}

@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
100% {
filter: hue-rotate(0deg);
}
}

section:before {
content: ”;
position: absolute;
top: 0;
left: 0;
border-top: 100vh solid transparent;
border-left: 100vh solid #fff;
opacity: 0.1;
}

section:after {
content: ”;
position: absolute;
bottom: 0;
right: 0;
border-top: 100vh solid transparent;
border-right: 100vh solid #fff;
opacity: 0.1;
}

Sau poți descărca de aici un fișier RAR care contine background-ul animatie.

LĂSAȚI UN MESAJ

Please enter your comment!
Please enter your name here