پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<h3 class="radikalwp-cs-tx-type">در حال نوشتن داستان شما<//h3>
.radikalwp-cs-tx-type {
  margin: 0;
  font-family: inherit;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}
.radikalwp-cs-tx-type::after {
  content: '';
  display: inline-block;
  width: 2.5px;
  height: 1.05em;
  margin-right: 4px;
  background: #2563eb;
  vertical-align: -0.15em;
  animation: radikalwp-tx-caret 1.1s step-end infinite;
}
@keyframes radikalwp-tx-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

درباره این اسنیپت

متن عنوان‌دار که کرسر مستطیلی آبی در پایان آن مثل ماشین‌نویس چشمک می‌زند و حس تایپ زنده و در جریان می‌دهد. خود متن ثابت است و کرسر با انیمیشن پلکانی خاموش و روشن می‌شود. برای هدر تایپی، بنر معرفی و بخش پیام‌های پویا مناسب است. کرسر با شبه‌المان ساخته شده و هیچ اسکریپتی لازم ندارد.

پرسش‌های متداول

مقدار 1.1s در animation را کم یا زیاد کنید. با step-end روشن و خاموشی کرسر تیز و ماشینی می‌ماند.

رنگ background شبه‌المان ::after را با رنگ دلخواه جایگزین کنید. رنگ متن عنوان را هم می‌توانید هماهنگ تغییر دهید.

خیر؛ این نسخه فقط کرسر چشمک‌زن دارد. برای تایپ واقعی می‌توانید اسکریپت ساده‌ای بنویسید که حروف را به‌تدریج به متن اضافه کند.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۴ از ۴ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

من طراح رابط کاربری هستم

پیش‌نمایش زنده اسنیپت

متن تایپ‌شونده

متن تایپ کرسر
۶۰
۴.۱ (۹)

برای یادگیری عمیق‌تر مستندات رسمی را بخوانید.

پیش‌نمایش زنده اسنیپت

متن هایلایت ماژیک هاور

متن هایلایت هاور
۱۰۰
۴.۳ (۱۶)

CREATIVE

پیش‌نمایش زنده اسنیپت

متن خط دور توخالی

متن توخالی outline
۱۰۰
۴.۲ (۱۶)