Veb-saytingiz uchun yana 35 ta CSS matn effekti

Portlangan effekt

Biz bir necha hafta oldin bir qator CSS matn effektlarini nashr etdik H2 sarlavhasi taqdimotini takomillashtirish mijozning veb-saytida sotiladigan mahsulot yoki xizmat ko'rsatuvchi yozuvning sarlavhasi. Biz mijozga taassurot qoldirish uchun izlayotgan va ular o'zlarining portfellarida uzoq vaqt davomida mavjud bo'lgan ushbu sifatni berishga qodir bo'lgan CSS matn effektlari.

Biz veb-saytni iloji boricha eng yaxshi tarzda namoyish etishga bag'ishlangan yana bir ajoyib CSS matn effektlari ro'yxati bilan qaytmoqdamiz. mahsulot, xizmat, ochilish sahifasi yoki boshqa turdagi mavzular. Bugungi kunda veb-dizayn eng yaxshi darajada ekanligini va biz eng zamonaviy estetikani kuzatib borish uchun poezdni o'tkazib yubormasligimizni ko'rsatib qo'yishingiz mumkin bo'lgan 35 ta matn effektlari.

Jim film effekti

O'zgartirish

Mavzuning ma'lum bir turi uchun mukammal bo'lgan juda aniq matn effekti. Iqtiboslar ko'rsatilishi mumkin bizning veb-saytimiz yoki mijozning dizayniga e'tibor berishimiz aniq bo'lishi uchun.

Tasodifiy CSS matn kiritish

Tasodifiy matn

Ushbu tasodifiy CSS matni kiritilishi go'yo tasodifiylashtirishga harakat qiladi zanjirning maxfiy kaliti. Muayyan mavzuga bag'ishlangan veb-sayt uchun matnni taqdim etishning juda jozibali usuli.

Cassie

Cassie

Una svg-dagi animatsiya bu bir nechta ranglarda shakllangan matnni taqdim etish uchun juda oz vaznni anglatadi. Belgilangan belgini to'liq berish uchun JavaScript-ni ishlatadigan ushbu matn mavjudligi juda hayratlanarli.

Animatsiya qilingan soya matni

Animatsiya qilingan soya matni

Ushbu jonlantirilgan soya matni juda o'ziga xos estetik ta'sirga ega va ro'yxatdagi boshqa yozuvlardan farq qiladi. Bu yerda biz JavaScript-ni unutdik CSS kodidan boshqa hech narsa taqdim etilmaydi.

Morph matni

Morph matni

JavaScript va CSS-dagi animatsion matn davriy ravishda o'zgaradi ba'zi bir neon ranglari bilan. Orqa fon rangi qora yoki kulrang bo'lgan veb-saytlar uchun. Juda boshqacha matn effekti uchun juda silliq animatsiya.

Matnni ajratish

Animatsiya qilingan bo'linish matni

Ushbu matn kuchga kirdi juda silliq animatsiyada ko'rsatiladi. Bundan tashqari, JavaScript mavjud. Bir marta bosish bilan juda qiziq matn effekti uchun erishilgan animatsiyani ko'rishingiz mumkin.

 

To'lqinli animatsiya

Animatsiya qilingan to'lqinli matn

SVG bilan matn ichida animatsiya to'lqinlari. Buning qiziq tomonlaridan biri matn effekti fon rasmida va uni to'g'ri ajratish uchun to'lqinni to'ldiradigan gradyan.

To'plamning animatsion matni

Matn matni

Bir oz JavaScript matn effektiga erishadi har bir harf o'z o'lchamiga ega shuning uchun u har xil stikerlardan tashkil topganga o'xshaydi. Taqdimotda juda ijodiy matn uchun ajoyib effekt.

Tutun effekti

Tutun effekti

Matn uchun ajoyib tutun ta'siri asta-sekin yo'q bo'lib ketmoqda butunlay g'oyib bo'lish. U bizni urish yoki bosish uchun ishlatilishi mumkin va matn bizdan oldin bug'lanib ketishi mumkin. JavaScript yo'q va juda oz CSS kodi.

Bubble ta'siri

Bubble ta'siri

Uni qanday yaratishni ko'rsatadigan jQuery matn effekti HTML-dagi sarlavhadagi ko'pik effekti. Ta'siri shundaki, matn orqasida pufakchalar xuddi gazlangan suv kabi paydo bo'ladi. Juda ajoyib.

Animatsiya qilingan to'ldirish matni

Animatsiyali to'ldirilgan matn

Shriftni fon tasviri bilan to'ldiradigan animatsion matn effekti. Javascript kerak emas va u faqat CSS kodi bilan ishlaydi. Veb-sayt uchun maxsus mavzularda mukammal bo'lgan matn uchun juda sekin va silliq animatsiya.

CSS va HTML-dagi matnli animatsiya

Sof CSS matni

CSS va HTML-dagi oddiy matnli animatsiya so'zlar vertikal ravishda tushadi yuqoridan. To'g'ridan-to'g'ri va sodda animatsiyani juda ko'p o'rashsiz bajarish uchun biz bu erda JavaScript-ni unutamiz.

Rangli matnli rasm

Rangli matn

Bu erda matn bilan chizilgan juda ajoyib rang effekti va bu o'spirinlik yoki yoshlik bilan bog'liq muammolar uchun eslatma berishi mumkin. Favvora jonli ohanglar ketma-ketligida nihoyat bo'sh.

SVG-da jonlantirilgan matn

SVG-da animatsiya qilingan

Faqatgina animatsiya bir soniya butun rasm chizig'idan o'tadi SVG-dagi animatsion matnning harflari. CSS va HTML bilan ishlash uchun biroz JavaScript-kod mavjud.

Soya matni

Soya matni

Ushbu matnning soyasi chuqurlik effekti deyarli qandolat do'koniga o'xshash yorqin ranglarda. Faqatgina nogironlik - bu mobil qurilmalar uchun optimallashtirilmagan.

Montserrat

Montserrat

O'zini ijodkorligi uchun namoyish qiladigan CSS va HTML-dagi animatsiya sariq va qizil ranglardan iborat ranglar. Matn chizilgan ranglarning animatsiyasining o'ziga xosligi bilan belgilanadigan foydalanish uchun.

Portlovchi ta'sir

Portlangan effekt

Ning matn effekti Ko'p sonli bo'laklarga portladi sichqoncha ko'rsatgichini so'zni tashkil etuvchi har bir harfdan o'tib, sekinlashishimiz mumkin. HTML, CSS va JavaScript-ni ishlatadigan diqqatni jalb qiladigan, yuqori sifatli matn effekti.

To'lqinli matn effekti

To'lqinli matn svg

JavaScript-ni ishlatmasdan, ushbu to'lqinli matn effekti animatsiya yaratishga muvaffaq bo'ladi fon rasmini haqiqatan ham harakatga keltiradi so'zni chizish orqali. Hech qanday shubhasiz va ajoyib ta'sirga ega.

GSAP animatsiyasi

GSAP animatsiyasi

Ko'pgina filmlarda bo'lgani kabi, paragrafni tashkil etuvchi barcha harflar animatsiyaga katta ta'sir ko'rsatadigan jumlalarni tuzish uchun hamma joylardan paydo bo'ladi. Effektlaridan biri uchun juda silliq butun ro'yxatdagi yanada jozibali va yuqori sifatli matn. Mijozlar uchun muayyan ish turlari uchun buni yodda tutish kerak.

Rangli matnli animatsiya

Rangli

Una sekin va suyuq animatsiya gradient yasashga muvaffaq bo'lgan matndagi rang. Garchi u biroz JavaScript-ga ega bo'lsa-da, asosan SCSS-ga asoslangan. Bu nozik effektlardan biri, ammo bu uni veb uchun qanday tanlashni bilish nafisligini namoyish etadi. Bu befarq qolmaydi.

Mumkin bo'lmagan matn effekti

Mumkin bo'lmagan matn

El matnni o'rab turgan qizil quti u so'zni yoki iborani qamrab oladigan soya effekti bilan o'ziga aylanadi. Veb-saytning kirish yoki sarlavhasini nafislik bilan qoplash juda ajoyib va ​​katta qiziqish uyg'otadi.

SVG bilan rangli matnni to'ldirish

SVG matni

Ulardan biri sifatida ko'rsatiladigan ko'p rangli to'ldirish animatsiyasi chiqadigan matn effektlari o'zi. Bu ro'yxatda noyobdir va veb-tashrif buyuruvchida shov-shuvlarni keltirib chiqaradigan juda kuchli ta'sirga ega. Agar u qanday joylashtirishni bilsa, u yozuvni beradi.

SVG-da jonlantirilgan matn

Yo'l SVG

Go'yo unga boradigan yo'l aylanayotgandek matnning yorqin animatsion SVG chizmasi. Ro'yxatdagi eng qiziquvchanlardan biri va o'zini mukammal aniqlash uchun o'z o'rniga joylashtirilgan.

Yorqin matn

Favqulodda askar

JavaScript, CSS va HTML-dagi ushbu matn mukammal bo'lishi mumkin reklama agentligining o'ziga xos xususiyati yozuvni bir jumla so'zi bilan berish. Ta'sir ilhom baxsh etadi va mehmonga e'tiborni tortadi.

Yorqin matn

Yorqin matn

Go'yo signalga aralashuv bo'lgan matnni chizish yoki uni jonlantirish, bu matn effekti ajoyib tugatish. Shubhasiz singular va o'zini namoyon qiladi. HTML (pug) va CSS (SCSS) da yaratilgan.

SCSS matni nosozligi

Glitch fan

Sizning saytingiz mavzusi tufayli juda aniq veb-saytda topadigan interferentsiyalarga ega bo'lgan yana bir nosoz matn, albatta ilmiy fantastika bilan bog'liq.

Matnni olib boring 

Matnni olib boring

Ko'rsatkichni matn ustiga qo'ygan payt, bu o'zaro bog'liqliklarga aylanadi bu bizga uni diqqatni jamlash uchun har bir harf orqali ko'chirishga imkon beradi, chunki qolganlari diqqat markazida bo'lmaydi. Juda noyob matn effekti uchun HTML, CSS va JavaScript.

Matnni istiqbolga olib boring

Matnni olib boring

Biz qo'yganimizda ushbu matn ustida sichqonchani ko'rsatgichi, u 3D effektini uzatadigan juda qiziquvchan nuqtai nazardan harakat qiladi.

Animatsiya qilingan ajratilgan matn

Tanlangan matn

Sichqoncha ko'rsatgichi bilan biz matnni quyidagicha ajratib ko'rsatamiz agar u ko'chirilishi yoki kesilishi kerak bo'lsa. Paragrafdagi barcha so'zlarni yopish uchun yuqoridan tushadigan matn effekti. JavaScript holda va CSS bilan.

Baxtli matn

Feliz

Matn effekti u urishidan xursandman sichqoncha ko'rsatkichini uning ba'zi harflari ustiga qo'ygunimizcha. Buning ta'siri, ba'zilarning shunday atashiga sabab bo'ladi. JavaScript holda va CSS bilan.

Kompozitsiyadagi 3 o'lchamli matn

3D matn

Uchun yana bir 3D matn effekti barcha harflardan turli xil so'zlarni hosil qiling tashqi ko'rinishdan ichkariga kattalashtirilgan bir ovozdan paydo bo'ladi. Ajoyib natija va juda vizual va kinematik. Ro'yxatdagi yana bir tavsiya etilgan.

Soyada sof CSS matni

Soya matni

Ushbu CSS-dagi matn effektiajoyib natija soyasini rovoke qilish va ajoyib uslub. Shubhasiz va ro'yxatdagi yana bir muhim voqea. Animatsiya yo'q, lekin ajoyib.

Chiroyli soya

Chiroyli soya

Haqiqatan ham ajoyib ko'rinadigan soya effekti. Sahifalarni ochish uchun juda yaxshi yoki bolalar bog'chasi veb-saytlari. O'z-o'zidan ajralib turish uchun sof CSS.

Ikkinchi soya

Ikkinchi soya svg

Yana bir ajoyib soya effekti HTML va CSS ajralib turadi o'z-o'zidan. Satrlardagi soya ma'lum mavzuli veb-saytlar uchun ajoyib nafislikni yaratadi.

Parallaks soyasi

Parallaks soyasi

Ro'yxatni bittasi bilan yakunlaymiz paralaksdagi eng oqlangan effektlar matn tomonidan berilgan soya uchun. Biz sichqoncha ko'rsatgichini uzatamiz va o'ng tomonga, soya shunchalik uzoqroq aks etadi. Rakt, ES6 va Babel tomonidan yozilgan.

Sizda yana bir ro'yxat mavjud bu erda matn effektlari.


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

Birinchi bo'lib izohlang

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.