35 chindan ham hayajonli CSS tasvir effektlari

CSS tasvir effektlari

Bugungi kunda vebda tasvirlar mavjud asosiy e'tiborni jalb qiluvchiga aylandi har qanday mavzular uchun unga murojaat qilgan foydalanuvchiga. Fotosuratlar, sayohatlar, mahsulotlar yoki har qanday ko'rinishdagi sahnalardan tasvirlar eng muhim elementlardan biridir, shuning uchun agar biz ajoyib effekt yarata olsak, ushbu fotosurat veb-saytimizga tushib qolgan foydalanuvchini saqlab qolish qudratiga ega bo'ladi.

Shunchaki ushbu effektlarning aksariyati veb-saytga tashrif buyuruvchida erishishi mumkin. Ba'zi hollarda chindan ham jozibali CSS effektlari boshqalar esa ular soddalashtirish maqsadiga ega bo'lishiga qaramay, har doim ham barchamiz izlayotgan narsalarga erishmoqdalar: foydalanuvchi bizning veb-saytimiz taqdim etadigan barcha narsalarga diqqat bilan qaraydi. Keling, 33 ta CSS tasvir effektlarini sanab o'tamiz, ular kuchli jozibali.

Suyuqlikni burama rasm 3D

3D kub

Ushbu tasvir effekti qachon juda ajoyib tasvirni 3D kubga ajratish ajoyib vizual effekt hosil qilish uchun vertikal atrofida aylana oladi. CSS3D-ga asoslanib, agar siz uni veb-saytingizda amalga oshira olsangiz, tashrif buyuruvchi og'zaki bo'ladi.

Tegishli maqola:
Veb-saytingiz uchun yana 35 ta CSS matn effekti

3D hover effekti

3D Hover effekti

Sichqoncha ko'rsatgichini rasm ustiga qo'yganimizda, bunga erishish uchun yana bir ajoyib vizual effekt xuddi shu narsa urilgandek yiqilib tushing. Boshqa ajoyib tasvir effekti uchun ajoyib animatsiya.

CSS 3D panoramasi

CSS 3D Panorama

HTML va CSS bir-biriga mos ravishda a ni yaratadi ajoyib panorama effekti go'yo biz shahardagi bino tepasidan qarab turgandek.

Tegishli maqola:
Veb-saytingizning tipografiyasi uchun 27 ta muhim CSS matn effekti

"Nishab" nuqtai nazaridagi rasmlar

Nishabni istiqbolli tasvirlash

Un vizual tajriba veb-qism sifatida ma'lum bir maqsadga xizmat qilishi mumkin.

Venetsiyalik pardalar

Venetsiyalik pardalar

Har safar ajoyib vizual effekt sichqoncha ko'rsatgichini qoldiring shuning uchun u tasvir beradigan ikkita qarama-qarshilik o'rtasida o'zgaradi.

Rasmni ajratish

Rasmni ajratish

Sichqoncha ko'rsatgichini rasm ustiga qo'yib, u uni mukammal tuzish uchun kattalashtiriladi.

Tasvir effektini olib keling

Effektli tasvirni olib boring

E dan chiqib ketganda grid effekti hosil bo'ladil ma'lum bir nuqta ustida sichqonchani ko'rsatgichi rasmdan.

Ko'zgu effekti 

Oyna

Rasm oynali effektli varaqlar sichqoncha ko'rsatgichini o'ngdan chapga va aksincha siljitishimiz bilan.

Ko'zgu effekti bilan rasm

Refleks effekti

Qidiradigan harakat tasvirdagi aks ta'sirini loyihalash biz ushbu CSS tasvir effekti uchun foydalanganmiz.

Hver effektida rasm qiyshayadi

Burilish effekti

Ulashi mumkin bir oz bosh aylang tasvir tomonlari qanday qilib juda ajoyib ikki tomonlama effekt hosil qilishini ko'rish.

Xiralashganlik effekti

Bulaniq effekti

Ko'rsatkichni rasm bo'ylab harakatlantirganda, xiralashuv effekti hosil qiladi bu soniyalarda yo'q bo'lib ketadi.

Tasvirni ko'tarish

Tasvirni ko'tarish

Ning ta'siri bor biz ko'rsatkichni qo'ygan bir vaqtning o'zida siljish rasm ustiga sichqoncha.

SVG-da sichqoncha effekti

Svg-ni olib borish

Qo'yadigan ajoyib effekt yashirin tasvirni ochdi ismning o'zi ostida. Ajoyib tugatish va ijodiy va qiziquvchan tasvirlar galereyasini namoyish qilish uchun juda yaxshi.

Hover-dagi matndan rasmga

SVG effekti

Sichqoncha ko'rsatgichi ko'zni qamashtiruvchi animatsiya bilan harakatlanayotganda matn tasvirni ochib beradi ko'r effekt bilan o'rtasidan ochiladi.

Fon rasmining bir qismini ochish

Hover-ni ochib bering

Go'yo bizning qo'limizda bo'lganidek telefoto linzalari, sichqoncha ko'rsatgichini siljitish paytida fon rasmining bir qismi aniqlanadi.

Animatsiyani olib boring

Rasmni olib keluvchi animatsiya

Katta ta'sirga ega, ammo uning tarkibida juda oddiy. Agar biror narsa izlayotgan bo'lsangiz soddalashtirilgan va minimalist, bu effekt sizni sevib qolishga majbur qiladi.

Hover effektini kuzatish

Rasmni kuzatish

Boshqa oddiy effekt ma'lum bir maqsad uchun.

Rasmni kattalashtirish

zoom

Bu shunday odatdagi masshtablash effekti veb-saytingizga hoziroq kirishni xohlashingiz aniq.

Kattalashtirish effekti effekti

Kattalashtirish tugmachasini bosing

Shunga o'xshash yana bir alternativa ko'rsatkichni tark etganimizda masshtab effekti sichqoncha rasmga joylashtirilgan.

Lupa effekti

Lupa effekti

Uning nomidan ko'rinib turibdiki, sichqonchani ko'rsatgichi rasmni o'zgartiradi uni kattalashtiradigan lupada.

JavaScript-ni o'chirish mumkin emas

JS yo'q

JavaScript yo'q siz masshtab effektini qayta yaratishingiz mumkin o'zgaruvchan panjarali rasm.

CSS ustki qatlam effekti

hover

Un qatlam uchun sof CSS effekti bu bizdagi rasmga o'rnatiladi.

Tasvirlar uchun yaxshi

Yaxshi rasmlar

Sizda foydalanuvchi elementlari uchun CSS ko'rsatuvlar kutubxonasi mavjud. Sizga mos keladiganini olish uchun havolada ularning barchasini ko'rishingiz mumkin. Sizda bir nechta effektlar mavjud juda sifatli.

Tasvirning ustki qismi

chiziqlar

Yuqori sifatli chiziq animatsiyasi bilan, ko'zni qamashtiradigan qatlamlar xususiyati mavjud. Sizning sevimlingizga aylanishi mumkin bo'lgan yana biri.

Tasvirning ustki qatlami

Dumaloq hover

Ning yana bir ta'siri bilan qaytamiz HTML va CSS-da joylashtirish unda dumaloq chiziqlar qahramonlardir.

Rasmning ustki qatlami effekti

hover

Turli veb-elementlar uchun ishlatilishi mumkin bo'lgan ajoyib qoplama effekti. Bilan kichik ijodkorlik birlashtirilishi mumkin kartalarda ushbu maqoladagi kabi.

Belgilar animatsiyasi bilan effektni olib keling

Hover belgisi

Dastlabki o'zgarishlarda sizni bezovta qiladigan piktogramma animatsiyasi bilan yuqori sifat. U qodir matnni katta ta'sirga keltiring.

Effektni subtitrlar bilan olib boring

Subtítulos

Bilan yana bir ajoyib hover effekti juda silliq animatsiya bilan paydo bo'ladigan subtitrlar va erishildi.

3D sichqoncha yo'nalishi effektlari

3D yo'nalishi

Butun ro'yxatda ko'rishingiz mumkin bo'lgan eng hayajonli tasvir effektlaridan biri. The sichqoncha ko'rsatkichi «3D kub» uchun qo'llanma bo'ladi.

Tasvir o'lchami

Rasm shkalasi

Yana bir oddiy effekt, ammo juda gullab-yashnagan holda juda ko'rgazmali.

React bilan iOS soya effekti

iOS soyalari

Un juda shov-shuvsiz effekt, lekin u ishlab chiqaradigan soya ta'sirida juda aniq, chunki u "erdan" ko'tarilganga o'xshaydi.

Shadow Style iOS 10

iOS soyasi

Sichqoncha ko'rsatgichida a mavjud "surish" effekti buyuk realizmni keltirib chiqaradigan obrazda. Juda qiziqarli.

Rasmga o'tish effekti

Mosaikos

Un ajoyib o'tish effekti unda tasvir panjaralar panjarasiga ajraladi. Effekt paydo bo'lish vaqtini va boshqalarni boshqarishingiz mumkin.

Rasmga o'tish

o'ting

Un juda zamonaviy va ijodiy o'tish effekti veb-saytingiz uchun. Ushbu CSS-da uchrashuvni o'tkazib yubormang.

Sichqoncha g'ildiragi yordamida rasmni siljitish

O'tish

Sizga kerak bo'ladi sichqoncha g'ildiragidan foydalanganingizdan so'ng uni amalga oshiring ajoyib o'tish animatsiyasi bilan bitta rasmdan ikkinchisiga o'tish. Ajoyib.


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

6 ta sharh, o'zingizni 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.   Sendi Ernandes dijo

    Salom. Siz yuborgan effektlar menga juda yoqdi. Tasodifan siz ko'rsatgichni rasmga qo'yganingizda qanday effekt paydo bo'lishini bilib olasiz va u pastdan yuqoriga siljiydi, bu veb-sahifalarni oldindan ko'rish uchun ideal. Mana nimani nazarda tutayotganimning bir misoli, «SONgi veb-sayt ishlari
    »Selectawebs.com veb-saytidan
    Advanceda rahmat

  2.   Omar dijo

    Zo'r sahifa va post, men uchun juda foydali bo'ldi, chunki ichki ilovalarga portalga kirish paneli uchun ba'zi effektlar kerak edi. Ushbu hissalar uchun katta rahmat.

  3.   rotger gabriel dijo

    Zo'r effektlar. Men o'zim o'qituvchiman, doim veb-ishlab chiqish g'oyasi menga juda yoqardi, o'qishni qanday boshlash va qanday tartibda borish haqida maslahatingizni juda istardim. hurmat bilan

  4.   tor dijo

    Salom, tarkibingiz uchun tashakkur. O'z sahifangizni bugun kashf eting. Bu ajablanarli. Unda o'qish va so'rovlar tugashi mumkin emas. ;)

    1.    Manuel Ramires dijo

      Salom Natalya! Creativos Online-dagi o'qishlar sizga yoqqanidan xursandman. Barcha ezgu tilaklarni tilayman!

  5.   Mendoza dijo

    Hey, yaxshi effektlarning ajoyib ro'yxati, ularni wordpress-ga elementor yordamida qanday qo'llashni ko'rish juda yaxshi bo'lar edi