یک صفحه HTML بسازید که شامل چندین مربع باشد و با استفاده از ویژگی transition-timing-function در CSS نشان دهید چگونه مقادیر ease، linear، ease-in، ease-out و یک تابع cubic-bezier رفتار تغییرات (مثل جابجایی و تغییر رنگ) را هنگام هاور متفاوت میکنند.
6.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:57 0.0
برای حل، چند با کلاسهای متفاوت ایجاد کنید و برای هر کلاس از یک transition مشخص (مثلاً transition: transform 0.6s ease;) استفاده کنید؛ در حالت :hover مقدار transform یا background-color را تغییر دهید تا اثر زمانبندی قابل مشاهده شود. میتوانید هر مربع را با یک مقدار timing function متفاوت (ease, linear, ease-in, ease-out, cubic-bezier(0.68, -0.55, 0.27, 1.55)) تنظیم کنید تا تفاوتها را مقایسه کنید. نکات: نیازی به جاوااسکریپت نیست، مدت زمان و خاصیت قابل انتقال (مثلاً transform یا background-color) را مشخص کنید و از ابزارهای DevTools یا ویرایشگرهای cubic-bezier برای تنظیم دقیق استفاده کنید.
توسط پژوهشگر در 202 روز قبل ساعت 02:57 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای نمایش تفاوتهای timing-function با یک صفحه ساده، از چند مربع با کلاسهای مختلف استفاده کنید و هر کدام transition مشخصی بدهید. در حالت hover، transform یا background-color را تغییر دهید تا تغییر زمانبندی به وضوح دیده شود. میتوانید هر کلاس را به یک مقدار timing-function متفاوت مثل ease، linear، ease-in، ease-out و cubic-bezier(0.68, -0.55, 0.27, 1.55) نسبت دهید. نکته مفید: مدت زمان را ثابت نگه دارید (مثلاً 0.6s)، از devtools برای تنظیم دقیق cubic-bezier استفاده کنید و برای عملکرد بهتر از will-change: transform, background-color بهره ببرید.
گزارش