Front-end: Как эффективнее изучить Css, какие библиотеки порекомендовать?

внешний интерфейс GitHub CSS
Front-end: Как эффективнее изучить Css, какие библиотеки порекомендовать?

Многие друзья спрашивали меня, как быстро научитьсяcssи какие полезныеcssБиблиотека, недавно я тоже нашел время подумать об этом, и сегодня я хотел бы поделиться с вами своим опытом.

Как эффективно выучить Css

Также использовался на работе раньшеcssсделал много интересных вещей, таких как использованиеcssРисовать значки, писать раунды, писать мотивацию, макет и т. д., но реализация этих приложений зависит отhtmlа такжеcssБазовые знания.

Согласно моему собственному опыту обучения, нам необходимо освоить следующие базовые знания:

  • Базовая структура синтаксиса CSS и настройки атрибутов
  • Блочная модель CSS
  • CSS-метод позиционирования
  • CSS макет
  • CSS BFC (контекст форматирования уровня блока)
  • Псевдоклассы и псевдоэлементы CSS
  • Медиа-запросы CSS
  • Css переходы и анимация

Освоив базовые знания, вы сможете писать больше кейсов и учиться на отличном опыте других.Здесь я поделюсь с вами сайтом, который я только начал изучать фронтенд.codeguide.co/. image.png

Этот веб-сайт имеет много базовых знаний и передового опыта, а также предоставляет множество классических фрагментов кода, которые мы можем изучить и использовать:

image.png

В то время как обучение также неотделимо из книги, посмотреть классические книги, создают нам лучшее понимание самого языка, но и поделиться здесь, прежде чем я чувствую себя хорошо и углубленнымcssкниги:

  • CSS мир
  • CSS раскрыт

Далее я поделюсь с вами некоторыми очень хорошимиcssбиблиотека.

Простой в использовании общий доступ к библиотеке css

Часто мы редко используем чистыйcssБиблиотека инструментов класса, как правило, максимально написана от руки, но она включает в себя некоторые сложные анимационные взаимодействия.Очень эффективно использовать существующие сторонние библиотеки.Здесь я поделюсь с вами несколькими из тех, которые я часто использовал до.cssбиблиотека.

1. hover.css

chrome-capture (7).gif

Стандартная анимация при наведении мыши. Поддерживаются следующие типы анимации:

  • 2D-переходы
  • Фоновые переходы
  • Иконки Переходы
  • Пограничные переходы
  • Тень и свечение
  • Речевые пузыри (переход с эффектом пузыря)
  • Кудри (переход свертки)

Если у вас есть аналогичный сценарий приложения, вы можете обратиться к нему.

2. animate.css

aninate.gif

Простой и удобный кроссбраузерныйCSSБиблиотека анимации предоставляет очень богатый эффект анимации, который в настоящее время используется во многих проектах с открытым исходным кодом.H5-Dooringа такжеDooringXОн также имеет множество встроенных анимационных эффектов.Если у вас есть похожие сценарии приложений, вы можете обратиться к нему.

3. Magic

magic.gif

Интеграция различных спецэффектовcssБиблиотека анимации, эффект анимации очень шокирует, если вы хотите сделать классный веб-сайт, вы можете использовать этоcssбиблиотека.

4. csshake

kite.gif

тот, который трясет и трясетDOMэлементальCSSБиблиотека, имитирующая вибрацию мобильного телефона на мобильном терминале, вибрацию окна QQ, все еще очень интересна.

5. hint.css

hint.gif

Использование чистогоcssа такжеhtmlРеализована библиотека подсказок. Объем очень маленький, и это очень полезно для некоторых сцен подсказок с фиксированным положением. Не беспокойтесь о чрезмерном размере пакета ~

6. kite

grid.gif

Очень совместимый и гибкий макетcssбиблиотека.использованиеinline-block, на основеOOCSSа такжеMindBEMding, что может помочь нам быстро создавать компоненты.

css фактический обмен боем

Ну вот и все на сегодняшнем обмене, если статья была вам полезна, добро пожаловатьподобно + Комментарий, чтобы побудить авторов создавать более качественный контент~

больше рекомендаций

Категории