<div class="radikalwp-hv-morph" style="background:linear-gradient(135deg,#a3e635,#16a34a)"><//div>.radikalwp-hv-morph {
width: 130px;
height: 130px;
border-radius: 28px;
cursor: pointer;
transition: border-radius .5s cubic-bezier(.4, 1.4, .6, 1), transform .5s ease;
box-shadow: 0 10px 26px rgba(22, 163, 74, .28);
}
.radikalwp-hv-morph:hover { border-radius: 50%; transform: rotate(6deg) scale(1.05); }درباره این اسنیپت
گوشه‌های تصویر در هاور از مربع گرد به دایره کامل تغییر می‌کنند؛ مورف نرم و لطیف. برای آواتارها و تصاویر پروفایل در لیست‌ها سرگرم‌کننده است. این هاور برای تصاویر گالری، نمونه‌کار و کارت‌های بلاگ طراحی شده و بازخورد لمسی قوی می‌دهد. پشتیبانی کامل راست‌چین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسش‌های متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاه‌ها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!