پیشنمایش زنده (iframe sandbox)
تمامصفحه
<div class="radikalwp-hv-split"><div class="radikalwp-hv-split-t" style="background:linear-gradient(180deg,#f97316,#ea580c)"><//div><div class="radikalwp-hv-split-b" style="background:linear-gradient(0deg,#c2410c,#ea580c)"><//div><span>مشاهده<//span><//div>
.radikalwp-hv-split { position: relative; width: 220px; height: 145px; cursor: pointer; }
.radikalwp-hv-split-t, .radikalwp-hv-split-b {
position: absolute;
left: 0;
right: 0;
height: 50%;
transition: transform .45s cubic-bezier(.5, .1, .3, 1);
}
.radikalwp-hv-split-t { top: 0; border-radius: 16px 16px 0 0; }
.radikalwp-hv-split-b { bottom: 0; border-radius: 0 0 16px 16px; }
.radikalwp-hv-split span {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
padding: 9px 22px;
font-size: 12.5px;
font-weight: 700;
color: #fff;
background: rgba(15, 23, 42, .85);
border-radius: 999px;
opacity: 0;
transition: opacity .3s ease .1s;
z-index: 2;
}
.radikalwp-hv-split:hover .radikalwp-hv-split-t { transform: translateY(-12px); }
.radikalwp-hv-split:hover .radikalwp-hv-split-b { transform: translateY(12px); }
.radikalwp-hv-split:hover span { opacity: 1; }
درباره این اسنیپت
تصویر به دو نیمه بالا/پایین تقسیم میشود که در هاور از هم فاصله میگیرند؛ افکت «باز شدن» متفاوت. برای معرفی محصولات و کاورهای خلاقانه جسورانه است.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۳ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!