جوانکاری و جووڵاندنی پاژەکانی ناو ماڵپەڕ (بەشی 1)
جووڵانە بنەڕەتییەکان — Transition
Transition چییە؟
Transition واتە «گواستنەوە»؛ کاتێک تایبەتمەندییەکی CSS (وەک ڕەنگ، قەبارە، شوێن) لە باری یەکەوە بۆ باری دووەم دەگۆڕێت، Transition وا دەکات ئەم گۆڕانکارییە بە نەرمی و بە دەرکەوتنی جوان ڕووبدات، نەک بە شێوەیەکی لەناکاو.نموونەی یەکەم: دوگمەیەکی جووڵاو
<style> .btn-animated { padding: 12px 30px; background: #6366f1; color: #fff; border: none; border-radius: 10px; font-size: 15px; cursor: pointer; transition: all 0.3s ease; } .btn-animated:hover { background: #4f46e5; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(99, 102, 241, 0.5); } </style>ئەنجام: کاتێک ماوس دەچێتە سەر دوگمەکە، بە نەرمی بەرز دەبێتەوە و سێبەرێکی جوانی پێوە دەردەکەوێت.
نموونەی دووەم: کارتی جووڵاو
<style>
.card {
width: 250px;
padding: 20px;
background: #eee;
border: 1px solid #ccc;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover {
transform: scale(1.05) rotate(-2deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
</style>ئەنجام: کارتەکە کاتێک ماوس دەچێتە سەر، گەورەتر دەبێت و کەمێک دەسووڕێتەوە.
خاڵە گرنگەکان
| خاڵ | ڕوونکردنەوە |
| transition: all | هەموو تایبەتمەندییەکان دەگۆڕێت |
| 0.3s | ماوەی جووڵانەکە |
| ease | جۆری جووڵانە (نەرم) |
| ease-in-out | دەستپێکردن و کۆتایی نەرم |
| linear | یەکسان لە هەموو کاتێکدا |
هەموو نموونەکان بە یەکەوە بۆ تاقیکردنەوە
<style>
.container {text-align:center;width:80%;margin:100px auto}
/* ---- 1 ---- */
.btn-animated {
padding: 12px 30px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 10px;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-animated:hover {
background: #4f46e5;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.5);
}
/* ---- 2 ---- */
.card {
width: 250px;
padding: 20px;
background: #eee;
border: 1px solid #ccc;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover {
transform: scale(1.05) rotate(-2deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
</style>
<div class="container">
<button class="btn-animated">دوگمەی یەک</button>
<button class="btn-animated">دوگمەی دوو</button>
<button class="btn-animated">دوگمەی سێ</button>
<hr>
<div class="card">ئەمە کارتێکە بە CSS دەجووڵێت</div>
</div
بارکردنی سەرنجەکان...