12. CSS Transitions & Hover Effects
📘 কনসেপ্ট (থিওরি)
CSS transitions প্রপার্টির মান পরিবর্তনের সময় (যেমন হোভারে) মসৃণ অ্যানিমেশন তৈরি করে।
**Transition প্রপার্টি:**
-
transition-property — কোন প্রপার্টি অ্যানিমেট হবে
- transition-duration — কতক্ষণ (যেমন 0.3s)
- transition-timing-function — গতির বক্ররেখা (ease, linear, ease-in-out)
- transition-delay — শুরুর আগে বিলম্ব
**শর্টহ্যান্ড:**
transition: all 0.3s ease;
**সাধারণ হোভার ইফেক্ট:**
.btn:hover {
background: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
**Transform** transitions এর সাথে বেশি ব্যবহৃত:
-
scale(1.1) — ১০% বড় হওয়া
- translateY(-5px) — ৫px উপরে ওঠা
- rotate(45deg) — ৪৫ ডিগ্রি ঘোরা💡 উদাহরণ
ট্রানজিশনসহ হোভার ইফেক্ট:
আমার উপর হোভার করুন!
আমার একটি মসৃণ হোভার ইফেক্ট আছে
🎯 আপনার কাজ (প্র্যাকটিস)
একটি বোতাম তৈরি করুন যা হোভারে রঙ পরিবর্তন করে, সামান্য উপরে ওঠে এবং ছায়া পায় — সবকিছু মসৃণ ট্রানজিশনসহ।
main.css
Loading...
OUTPUT
Run your code to see the output here...