35 чындыгында кубанычтуу CSS сүрөт эффекттери

CSS сүрөт эффекттери

Бүгүн вебде сүрөттөр бар негизги көңүл буруучуга айланды ага ар кандай темада кайрылган колдонуучуга. Сүрөттөрдөн, саякаттан, ар кандай буюмдардан же көрүнүштөрдөн тартып, сүрөттөр эң маанилүү элементтердин бири болуп саналат, ошондуктан биз укмуштуудай эффект бере алсак, ал сүрөт биздин веб-сайтка жыгылып калган колдонуучуну сактап кала алат.

Вебсайттын коногунда ушул эффекттердин көпчүлүгү жетише алат. Айрым учурларда көздүн жоосун алган CSS эффекттери башкаларда алар жөнөкөй болуу максатын көздөшөт, бирок ар дайым бардыгыбыз издеген нерсеге жетебиз: колдонуучу биздин веб-сайт сунуш кылган нерселердин бардыгына көңүл бурат. Эми күчтүү CSS 33 сүрөт эффекттерин санап көрөлү.

көрсөткүч

Fluid Twisting Image 3D

3d куб

Бул сүрөт эффекти чындыгында укмуштуудай сүрөттү 3D кубга ажыратуу Визиталдык эффектти жаратуу үчүн, анын вертикалы боюнча айлануу мүмкүнчүлүгү бар. CSS3Dдин негизинде, эгерде сиз аны веб-сайтыңызга киргизе алсаңыз, анда келген адам ооз ачпай калат.

Окшош макала:
Вебсайтыңызга дагы 35 CSS тексттик эффект

3D учкуч эффект

3D Hover Effect

Дагы бир сонун визуалдык эффект, сүрөттүн үстүнө чычкан көрсөткүчүн таштап койгондо, буга жетишүүгө болот ошол эле урган сыяктуу кулап. Дагы бир сонун имидж эффектиси үчүн сонун анимация.

CSS 3D Панорама

CSS 3D Pânorama

HTML менен CSS бири-бирин түзүп, а жасашат улуу панорама эффектиси шаардагы имараттын чокусунан карап жаткандай.

Окшош макала:
Вебсайтыңыздын типографиясы үчүн 27 маанилүү CSS тексттик эффекттер

Сүрөттөр "эңкейиш" перспективасында

Перспективдүү жантайыңкы сүрөт

Un визуалдык эксперимент бул веб-бөлүк катары белгилүү бир максатты аткара алат.

Венециялык жалюзи

Венециялык жалюзи

Ар бир жолу сонун визуалдык эффект чычкан көрсөткүчүн калтыруу ал сүрөттөлүш берген эки карама-каршылыктын ортосунда өзгөрөт.

Сүрөттү бөлүү

Сүрөттү бөлүү

Чычкан көрсөткүчүн сүрөттүн үстүнө алып барып, ал аны толук курамдуу кылуу үчүн чоңойтулат.

Сүрөттөгү эффектти алып барыңыз

Effect Image сүрөтүн алып барыңыз

E кеткенден кийин тор эффектиси пайда болотl белгилүү бир чекиттин үстүнөн көрсөткөн чычкан сүрөттөн.

күзгү таасири 

күзгү

Сүрөт күзгү эффекттүү түрмөктөр чычкан көрсөткүчүн оңдон солго жана тескерисинче жылдырып жатканда.

Чагылтуу эффектиндеги сүрөт

Рефлектордук эффект

Издеген аракет чагылдыруу таасирин проектиге чагылдыруу бул CSS сүрөт эффектиси үчүн биз колдонгон.

Сүрөттү ийрөө эффектинде жантайтуу

Кыйшык эффект

Жете алат бир аз баш айлануу сүрөттүн капталдары кандайча укмуштуудай кош эффект жараткандыгын көрүү.

Бүдөмүктөтүү эффектин алып барыңыз

Бүдөмүктөө эффектиси

Көрсөткүчтү сүрөт аркылуу жылдырып жатканда, бүдөмүк эффект жаратат ал секунда ичинде жок болуп кетет.

Image hover

Image hover

Таасири бар биз көрсөткүчтү койгон ошол эле учурда жылышуу сүрөттүн үстүнөн чычкан.

SVGде курсордун эффектиси

Hover svg

Коё турган сонун учкуч эффект жашырылган сүрөттү ачыкка чыгарды аты менен Сүрөттөрдүн чыгармачыл жана кызыктуу галереясын көрсөтүү үчүн мыкты жасалгалоо жана кемчиликсиз.

Хоптагы тексттен сүрөттө

SVG эффектиси

Чычкан көрсөткүчүн укмуштай анимация менен жылдырганда текст сүрөттү ачып берет сокур эффект менен ортодон ачылат.

Фондук сүрөттүн бир бөлүгүн ачуу

Курсорду ачып көрсөтүү

Биздин колубузда болгондой телефото линзанын айкашы, чычкан көрсөткүчүн жылдырганда фондук сүрөттүн бир бөлүгү ачылат.

Анимацияны алып барыңыз

Сүрөттү Hover Animation

Эффективдүү, бирок курамы боюнча өтө жөнөкөй. Эгер сиз бир нерсе издеп жатсаңыз жөнөкөй жана минималисттик, бул таасир сизди сүйүүгө түртөт.

Курсордун эффектине көз салуу

Издөө сүрөтү

башка жөнөкөй эффект белгилүү бир максат үчүн.

Сүрөттү кичирейтүү

Zoom

Бул типтүү масштабдоо эффектиси сиз азыр веб-сайтыңызга алып кетүүнү каалайсыз.

Масштабды көтөрүү таасири

Масштабды көтөрүңүз

Дагы бир окшош альтернатива көрсөткүчтү таштап жатканда чоңойтуу эффектиси чычкан сүрөтүнө жайгаштырылган.

Лупа эффектиси

Лупа эффектиси

Анын аты айтып тургандай, чычкан көрсөткүчү сүрөттү бурат аны чоңойтуучу лупада.

JavaScript сүйрөө жок

JS жок

JavaScript жок кичирейтүү эффектин кайра жаратсаңыз болот өзгөрүлмө торчосу бар сүрөт.

CSS overlay эффектиси

Hover

Un катмар үчүн таза CSS эффектиси бизде бар сүрөттө орнотулган.

Сүрөттөр үчүн Hovy

Hovy сүрөттөрү

Сизде колдонуучу элементтери үчүн CSS анимациясынын китепканасы бар. Алардын бардыгын шилтемеден өзүнө ылайыктуусун алуу үчүн көрө аласыз. Сизде тандоо үчүн бир нече эффект бар сонун сапаттагы.

Image Overlay

саптар

Сапаттуу анимация менен, көз жоосун алган катмар өзгөчөлөнгөн. Сиздин сүйүктүүңүзгө айланган дагы бир нерсе.

Сүрөттүн үстүңкү катмарынын таасири

Айлана айлануу

Биз дагы бир таасири менен кайтып HTML жана CSS катмарлары анда тегерек сызыктар каармандар.

Сүрөттүн үстүңкү катмарынын таасири

Hover

Ар кандай желе элементтери үчүн колдонула турган укмуштуудай үстүртөн каптоо эффектиси. Менен кичинекей чыгармачылыкты бириктирсе болот карталарда ушул макалада айтылгандарга окшоп.

Сөлөкөт анимациясы менен эффектти алып барыңыз

Курсордун сүрөтчөсү

Алгачкы өзгөрүүлөрдө сизди таң калтырган сөлөкөт анимациясы менен жогорку сапат. Ал жасай алат текстти чоң натыйжага алып келүү.

Субтитрлер менен эффектти алып барыңыз

subtítulos

Менен дагы бир сонун учуу таасири өтө жылмакай анимация менен чыккан субтитрлер жана жетишилген.

3D алып баруучу багыттагы эффекттер

3D багыты

Бүткүл тизмедеги эң кызыктуу сүрөт эффекттеринин бири. The чычкан көрсөткүчү «3D кубу» үчүн колдонмо болуп калат.

Сүрөттүн масштабы

Сүрөттүн масштабы

Дагы бир жөнөкөй эффект, бирок көп гүлдөбөй туруп, абдан шоу.

React менен iOS көлөкөсүнүн таасири

ios Shadows

Un көп деле ызы-чуусуз эле натыйжа берет, бирок ал пайда болгон көмүскө эффектте өтө конкреттүү, анткени ал "жерден" көтөрүлгөндөй сезилет.

Shadow Style iOS 10

ios shadow

Чычкан көрсөткүчүндө a бар "түртүү" эффектиси улуу реализмди жараткан образ жөнүндө. Абдан кызыктуу.

Сүрөттүн өтүү эффектиси

Мозаика

Un сонун өткөөл эффект анда сүрөт торчолордун торчосуна ажырайт. Эффект пайда болгон убакытты жана башкаларды башкара аласыз.

Сүрөттү жылдыруу

жылдыруу

Un өтө модалуу жана чыгармачыл өткөөл эффект вебсайтыңыз үчүн. Ушул CSS-те жолугушууну өткөрүп жибербеңиз.

Чычкан дөңгөлөгү менен сүрөттү жылдыруу

өтүү

Сиз аргасыз болосуз аны чычкан дөңгөлөгүн колдонуп жаткан учуруңузда ишке ашырыңыз өткөөл анимация менен бир сүрөттөн экинчисине өтүү. Укмуштуу.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

6 комментарий, өзүңүздүкүн калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Сэнди Эрнандес ал мындай деди:

    Салам. Сиздин жарыялаган эффекттериңиз мага аябай жакты. Кандайдыр бир эффект кандайча сүрөттөлүшкө көрсөткөнүңүздө жана ал ылдыйдан өйдө карай жылгандыгын, веб баракчалардын алдын-ала көрүнүшү үчүн идеалдуу экендигин билесиз. Бул жерде мен айткым келген мисал, «АКЫРКЫ САЙТ ЖОЛДОРУ
    »Вебсайттан selectawebs.com
    Алдын ала рахмат

  2.   омар ал мындай деди:

    Мыкты баракча жана пост, бул мен үчүн абдан пайдалуу болду, анткени мен ички тиркемелерге кирүү панелинин порталына кандайдыр бир эффекттерди талап кылдым. Бул салымдар үчүн чоң рахмат.

  3.   rotger gabriel ал мындай деди:

    Мыкты эффекттер. Мен өзүмдү-өзүм үйрөтүп жатам, веб иштеп чыгуу идеясы мага абдан жакты, кантип баштоо керек жана кандай тартипте окууга өтүү керек деген кеңештериңизди аябай каалайм. урматтоо менен

  4.   тыгыз ал мындай деди:

    Салам, мазмунуңуз үчүн рахмат. Бүгүн баракчаңызды ачыңыз. Бул керемет. Окууга жана андагы суроолордун аягы жок. ;)

    1.    Manuel Ramirez ал мындай деди:

      Салам Наталья! Creativos Online'догу окуу сизге жаккандыгына кубанычтамын. Бардыгы жакшы болсун!

  5.   Мендоза ал мындай деди:

    Эй, эффекттердин укмуштуудай тизмеси, аларды wordpressке elementor менен кантип колдонсо болоорун көрсөңүз абдан сонун болмок