Jinsi ya Kutengeneza Background Gradient Animation kwa CSS
Jifunze jinsi ya kuunda background gradient animations zinazofanya website yako kuwa interactive na kuvutia. Animations hizi zinabadilisha rangi za background kwa smooth transitions, na zinaweza kutumika kwa sections, buttons, au pages nzima.
Mfano wa Code:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Gradient Animation</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: #fff;
text-align: center;
font-size: 2rem;
}
/* Keyframes for background animation */
@keyframes gradientBG {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
</style>
</head>
<body>
<h1>Animated Gradient Background</h1>
</body>
</html>
Maelezo ya Code:
background: linear-gradient(...) inaunda gradient ya rangi nyingi.
background-size: 400% 400% inaruhusu animation ya smooth ya mabadiliko ya rangi.
@keyframes gradientBG inabadilisha position ya gradient ili ionekane inazunguka au inabadilika rangi.
animation: gradientBG 15s ease infinite; inafanya animation iendelee bila mwisho.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
Mfano wa Code:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Gradient Animation</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: #fff;
text-align: center;
font-size: 2rem;
}
/* Keyframes for background animation */
@keyframes gradientBG {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
</style>
</head>
<body>
<h1>Animated Gradient Background</h1>
</body>
</html>
Maelezo ya Code:
background: linear-gradient(...) inaunda gradient ya rangi nyingi.
background-size: 400% 400% inaruhusu animation ya smooth ya mabadiliko ya rangi.
@keyframes gradientBG inabadilisha position ya gradient ili ionekane inazunguka au inabadilika rangi.
animation: gradientBG 15s ease infinite; inafanya animation iendelee bila mwisho.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509