Veb-saytingiz uchun CSS-dagi 23 ta animatsion o'q

CSS o'qlari

Biz qo'ygan maqolalarning yana bir turini davom ettiramiz biz bepul olishimiz mumkin bo'lgan elementlarga urg'u codepen.io kabi veb-saytlardan. Kodni CSS, HTML yoki JavaScript-da olish uchun juda katta ahamiyatga ega bo'lgan saytlar va shu bilan veb-saytning ingl. yaxshi dasturlashtirilgan kod va ijodiy g'oyalarni amalga oshirish orqali biz boshqa maqsadlarga yo'naltiradigan veb-sayt.

Ular shunday 23 animatsion CSS o'qlari ular tematik X loyihasi jamoasi oldidan o'tmoqchi bo'lgan foydalanuvchining nigohini yoki elektron tijoratda sotib olish mumkin bo'lgan joyga yo'naltirishga moyil bo'lgan elementlar uchun juda mos keladi; voronkalarni yaratish va shu bilan biz elektron tijoratimizda sotadigan ushbu mahsulotning katta konversiyasiga erishish uchun zarur bo'lgan o'qlar.

Animatsiya qilingan CSS o'qlari

CSS animatsion o'qlari

Arrows Yon tomonga siljitish bilan jonlantirilgan CSS bu 23-seriyadagi animatsion CSS o'qlarining birinchi namunasi. Vizual natijalari katta bo'lgan va aytilganidan ko'p bo'lmagan o'qlar uchun oddiy effekt.

Animatsiyalangan o'q

Animatsiyalangan o'q

Una svg-dagi o'q sichqonchani ko'rsatgichi bo'lganida, bu etarli va sifatli animatsiyaga erishadi. Dumaloq harakatlarda biz ko'plab veb-saytlar uchun ushbu muhim veb-elementni ta'kidlaymiz.

Strelka animatsiyasi

Strelka animatsiyasi

Dan iborat bo'lgan CSS va HTML dagi animatsiya o'qning oddiy o'zgarishi zamonaviyroq va klassikroq. Yaxshi tugagan va juda oddiy o'q uchun bu animatsiyadan boshqa narsa yo'q.

Strelka animatsiyalari

CSS o'q ko'rsatuvlari

Bir qator animatsion o'qlar turli pozitsiyalar va harakatlar. Harakat veb-saytdagi bo'sh joyni ajratib turadigan "hover" dan iborat o'qlar uchun lateraldir.

Strelka havolasi

Doira bo'ylab olib boring

A aylana aylanasi sichqoncha ko'rsatgichini ushbu belgi ustiga qo'yganimizda. Juda sodda va yaxshi boshqariladigan animatsiya, ammo qolganlari kabi ajoyib effekt bilan biz ushbu postdan Creativos Online-da baham ko'ramiz.

Uch o'qli animatsiya

Uch karra svg

SVG tasviriga asoslanib, bu erda siz ushbu rasm formatiga bag'ishlangan bir qator veb-saytlarga egasiz, a uchchalasiga olib boradigan uch karra animatsiya faqat bittasida dastlabki o'qlar. Veb-saytingiz uchun yana bir ajoyib effekt, bu unga professional teginishni beradi.

Oddiy CSS o'qi tepaga

Oddiy toza CSS

Bu CSS-dagi oddiy o'q veb-saytning boshiga qaytish vazifasi bor. Bir qarashda chiroyli va sodda animatsiyani tashkil etadigan boshlang'ich va tugash tezligidagi hiyla-nayrang, garchi u har doim oldingi kabi professional ko'rinishga ega bo'lsa ham.

Elastik o'q

Elastik

Bu tugmachani bosganingizda elastik strelka diqqatga sazovordir yoki uni bosgan bo'lsangiz, piktogramma joylashgan sohada pog'ona effekti hosil bo'ladi. Biz buni asosan JavaScript-ga asoslangan o'q ekanligini tan olishimiz kerak.

SVG o'qini animatsiya bilan

Strelka animatsiyasi

Sizni kutayotgan SVG o'qi ko'rsatgichni pastga qoldiring shunday qilib, siljish effekti paydo bo'ladi va rang qizil rangga, hech bo'lmaganda misolda keltirilgan rangga o'zgaradi, shunda bu bizning xohishimiz va istagimizga moslashtirish masalasi bo'ladi.

CSS Chevron o'qlari

CSS Chevron

Rang o'zgarishi bilan o'zini egganda juda oddiy CSS o'qi. A eng asosiy o'qlarning, lekin sifat etishmasligi va kutilgan teginish boshqalar kabi.

Ok svg

Ok svg

O'tish effekti piktogramma vaznida yoki «tortishida», bu holda ushbu yozuvning qahramoni sifatida o'q. Siz o'qning og'irligini CSS-ga asoslangan juda oddiy effekt bilan oshirasiz.

O'qlangan

O'qlangan

Un o'q eksperimenti unda biz div va psevdo elementlari bilan yaratilishning o'ziga xos xususiyati bilan ularning xilma-xilligini topamiz.

Sof CSS o'qlari

Sof CSS o'qlari

Boshqa boyitadigan o'qlarning turi ro'yxat, garchi bu erda biz CSS va HTML-da yaratilganimizdan ajralib tursak.

Egri CSS o'qi

Egri o'q

Agar berishni xohlasangiz xuddi chizilgan kabi egri effekt CSS-dagi ushbu o'q shu maqsad uchun juda mos keladi.

Ok

O'tish o'qi

CSS-ga o'tishga ega bo'lgan o'q o'qning yemirilish ta'siri ushbu rasmni chizadigan bir nechta rasmlarda.

Bittasida uchta o'q

Uchtasi bitta

Nozik animatsiya uchta o'qni bittaga aylantirishga muvaffaq bo'ling. Biz izlashimiz mumkin bo'lgan effektlardan yana biri va biz o'z kodimizga egamiz, shunda biz uni o'z ishimizda yoki veb-saytimizda xohlagancha ishlatamiz.

Sof CSS-ga o'tish animatsiyasi

Sof CSS

In animatsiya cheksiz rejim eng kattasi bo'lganida, ikkinchisiga o'tishga imkon beradigan bir qator o'qlar. Ajoyib tugatish bilan, u vebdagi ko'rsatmalarga rioya qilishni rag'batlantirish uchun ideal o'qga aylanadi.

SCSS o'qi animatsiyasi

SCSS

Boshqa juda oddiy cheksiz animatsiya va boshqa o'qga yo'l ochib berishning pasayishi va shu bilan juda o'ziga xos "halqa" ga erishish bilan tavsiflanadi.

Gooey o'qi animatsiyasi

Gouey

Ushbu o'qlar ro'yxatida ko'rilgan barcha animatsiyalar orasida, shubhasiz eng qiziquvchan va eng ijodiy. U vertikal ravishda aylanayotgan sohadan deyarli o'tib ketadigan animatsiya. Veb-saytingizga kiradigan foydalanuvchini hayratda qoldirish tavsiya etiladi.

Oxiriga qadar animatsiya

Pastga o'q

Ushbu animatsiya, avvalgilariga o'xshab, ega veb-sayt oxirida foydalanuvchiga shuning uchun u altbilgiga o'tadi. U boshqalardan ajralib turadigan ijodiy animatsiya bilan ajralib turadi. Buni codepen.io-ga havoladan amalda ko'rganingiz ma'qul.

Ok oddiy belgisi

Oddiy belgi

Belgilangan belgi juda oddiy va u Bu oddiy animatsiyadan iborat. Bu Joshua MacDonald tomonidan taqqoslangan sifat kodiga duch kelayotganimizni anglatmaydi.

Qaytgan o'q animatsiyasi

Animatsiyalangan o'q

A bilan boshqa o'q HTML va CSS-da pog'ona animatsiyasi bu boshqalardan farq qilishga harakat qiladi. Albatta siz uni demodan olasiz va havolani yuklab olasiz.

Strelka animatsiyasi

Strelka animatsiyasi

CSS va HTML-dagi o'q uchun yana bir animatsiya, bu u yaxshi «ko'chirilgan». Bu veb-saytingiz uchun ushbu 23 ta CSS o'qining qolgan qismidan ajralib turadigan eng katta boylikdir.


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

Izoh, o'zingiznikini qoldiring

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.

  1.   Karolina dijo

    Salom! Ma'lumot uchun katta rahmat. Egri o'q haqida savolim bor ... egri chiziqning aylanishini o'zgartirishning bir usuli bormi? menga kodni ko'rsata olasizmi? Men buni qadrlayman!