Script-uri HTML|CSS: Efect de animatie.

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.

Reducere de 3% pe QuickMobile3% Reducere
Reducere de 3% pe QuickMobile
La orice achiziție de pe site-ul QuickMobile.ro primești 3% reducere folosind cuponul de reducere:
QUICK456

Latest articles

Părerea mea despre Hosterion

Chiar nu mai știu cum am dat de Hosterion, dar chiar nu mai contează, Hosterion a rămas pentru mine cea mai bună...

Cum activezi Dark Mode pe WhatsApp în varianta de desktop?

WhatsApp a adăugat la un bun sfârșit Dark Mode-ul și pe varianta de desktop (aplicație și web). Aceasta este foarte similară cu cea de...

Cum va arăta Samsung Galaxy Note20 Ultra?

Chiar dacă seria Note este cea mai scumpă serie de telefoane produsă de Samsung, pasionații de telefoane așteaptă cu nerăbdare an de...

eMAG Genius gratuit? Da. Cu cardul de cumpărături eMAG de la Raiffeisen

Nu cred că mai există persoană care nu a auzit de eMAG Genius, la câtă reclamă s-a făcut. În mod normal, eMAG...

Related articles

Leave a reply

Please enter your comment!
Please enter your name here