предисловие
CSS — это особый язык, он не требует абстрактного мышления и строгой логики, как обычные языки программирования.воображение- Выражайте образы в уме с помощью кода. Так как же появились образы? Наиболее распространенным методом являетсяИсследуйте и наблюдайте. Например, я обычно люблю смотреть Фанфаны, и каждый раз, когда я вижу интересную сцену, я подсознательно записываю ее, что будет очень полезно для создания анимации; аналогично, как только я найду хорошо сделанный сайт, я также поставлю его. на веб-сайте.Эти привлекательные элементы тщательно изучаются, и вдохновение приходит само собой.
Демонстрационный URL-адрес 1:codepen
Демонстрационный URL 2:shiroi
Адрес источника:github
Советы в этой статье не остановятся на 72. Вдохновение бесконечно, творчество бесконечно.
Уведомление
совместимость
Все советы в этой статьеСовместимость не рассматривается, потому что лично я считаю, что совместимость — это ограничение, которое мешает вам писать отличные работы. Если вам нужно подумать об этом, пожалуйста, решите это сами.этот сайтМожет быть, это может помочь вам.
Рамка
В этой статье используются все методы SCSS+TypeScript. Если вы хотите портировать на React или Vue, адаптируйте его в соответствии с характеристиками самого фреймворка. Причина, по которой я не использую такие фреймворки, проста: фреймворки могут легко устареть, а нативный CSS+JS — это главное.
руководство
Автор действительно не умеет писать такие вещи, но я могу перечислить часто используемые атрибуты и шаблоны для справки.
Общие свойства:кликните сюда
Общий режим:кликните сюда
анимация
использовать разныеdelayРеализовать поэтапную анимацию
- Reveal Text
- Staggered Stair Loading
- Staggered Square Loading
- Staggered Wave Loading
- Gleaming Loading
- Particle Burst
- Gleaming Heading
- Staggered Shrinking Loading
- Snow
- Staggered Rise In Text
- Staggered LandIn Text
текст
использоватьbackground-clip:textСотрудничатьcolorРеализовать текстовый эффект градиента
Воспользуйтесь преимуществами динамикиhslЦвет для достижения эффекта радужного текста
использоватьtext-shadowРеализовать светящийся текстовый эффект
использоватьtext-shadowРеализовать эффект псевдо-3D текста
использоватьweb animationПузырящийся текстовый эффект
Воспользуйтесь преимуществами динамикиmax-widthРеализовать эффект расширения текста
Отразить текст, используя абсолютное позиционирование, 3D-преобразование и JS
визуальный
использоватьbackdrop-filterРеализуйте фоновый эффект матового стекла
Воспользуйтесь фоном, абсолютным позиционированием иfilterДостигните эффекта глубины резкости матового стекла
использоватьblurиcontrastФильтр для достижения эффекта слияния
Используйте наложения элементовblurФильтр для эффекта дневного света
- Eclipse Loader
- Glowing List Hover
- Glowing Gradient Border
- Glowing Gradient Button
- Crimson Crescent Loading
использоватьmix-blend-mode:screenРеализовать эффект текстовой маски
использовать-webkit-box-reflectРеализовать эффект отражения
страница
Эффект параллакса с использованием 3D-преобразования
использоватьposition:stickyРеализация эффекта липкой прокрутки
Растянутые камерой фоновые эффекты с абсолютным позиционированием и поэтапной анимацией
Слайд-шоу с псевдоэлементами, абсолютным позиционированием и анимацией
компоненты
использоватьborder-radiusРеализовать изогнутую панель навигации
Реализация гамбургер-меню с анимацией и абсолютным позиционированием
Использование псевдоэлементов и анимации для достижения динамических эффектов линий
- Menu Hover Underline
- Menu Hover Magnify
- Button Hover Border Stroke With Float Text
- Header With Slide Bar
- Button Hover Multiple Border Stroke
Используйте псевдоэлементы иoverflow:hiddenРеализовать разбитое текстовое меню в шахматном порядке
- Split Text Menu
- Staggered Float Text Menu
- Shinchou Menu(Меню осторожного храброго стиля)