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
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.