предисловие

Эта статья представляет собой процедуру, которую я использую при написании CSS. Каким бы великолепным ни был эффект, он остается прежним.

Ступенчатая анимация

Иногда нам нужно добавить одну и ту же анимацию к нескольким элементам.Поиграв, нетрудно обнаружить, что они будут двигаться вместе и заканчиваться вместе, что будет выглядеть очень пресно.

Так как анимация будет немного интересной причиной? Очень просто, так как они все в то же время начинают двигаться, то пусть они не в то же время движения не на него не на него. Как они не в то же время деятельности? Анимация CSS отметила задержку (delay) это свойство. Например, если есть десять элементов, воспроизводящих десять анимаций, установите время воспроизведения анимации второго элемента на 0,5 секунды позже, чем первого элемента (то есть установите задержку на 0,5 секунды), и так далее для других элементов. , так что они расположены в шахматном порядке для уникального визуального эффекта.

Это так называемая поэтапная анимация: задавая разное время задержки, достигается эффект поэтапного воспроизведения анимации.

Этот демонстрационный адрес:Staggered Wave Loading

Разделить текст с помощью JS

Есть и часто используемый геймплей: разделяйте предложения или слова на буквы с помощью JS, и добавляйте анимации с разной задержкой к каждой букве, что тоже шикарно

Этот демонстрационный адрес:Staggered LandIn Text

Ступенчатая анимация в разных положениях

Обычно мы начинаем чередование с первого элемента. Но если вы хотите чередовать от среднего элемента, вам нужно добавить значение к задержке текущего элемента.Это значение представляет собой расстояние от нижнего индекса среднего элемента до нижнего индекса текущего элемента (то есть абсолютный значение разницы между нижними индексами) произведение с размером шага

Этот демонстрационный адрес:Reveal Text

Случайная анимация частиц

Говоря о случайности, мы можем добиться еще более безумного эффекта: анимировать сотни частиц, чередующихся в случайное время и случайных размеров. Таким образом, мы можем имитировать эффект снега с помощью чистого CSS.

Этот демонстрационный адрес:Snow (Pure CSS)

Псевдоклассы и псевдоэлементы

псевдо-класс

Состояние HTML-элементов может динамически изменяться. Например, когда ваша мышь наводится на кнопку, кнопка становится «подвешенной», тогда мы можем использовать псевдокласс:hoverчтобы выбрать кнопку в этом состоянии и изменить ее стиль.

:hoverЭто один из наиболее часто используемых псевдоклассов. Другим очень часто используемым псевдоклассом является:nth-child, который используется для выбора дочернего элемента элемента. другие подобные:focus,:focus-withinи т. д. Есть также определенные виды использования.

Этот демонстрационный адрес:Button Hover Border Stroke With Float Text

Абсолютное позиционирование для достижения нескольких границ

Кто предусмотрел, что кнопки могут иметь только один набор границ? Используйте абсолютное позиционирование иpadding, мы можем сделать 3 набора рамок разного размера для кнопки, чтобы эффект был более ослепительным

Этот демонстрационный адрес:Button Hover Multiple Border Stroke

псевдоэлемент

Короче говоря, псевдоэлемент — это дополнительный элемент, вставляемый поверх исходного элемента, и этот элемент не действует как тег HTML, поэтому структуру HTML можно поддерживать в чистоте.

Мы знаем, что каждый элемент имеет::beforeа также::afterЭти два псевдоэлемента, то есть каждый элемент предоставляет нам 3 прямоугольника (1 для самого элемента, 2 для псевдоэлемента) для рисования формы. теперь сноваclip-pathБлагодаря этому свойству можно нарисовать практически любую фигуру, в зависимости от вашей фантазии.

Приведенная выше анимация — это анимация полосы поперек текста.Полоса — это псевдоэлемент, соответствующий каждому тексту.Применив анимацию к каждому тексту и его псевдоэлементу, можно добиться эффекта, показанного на рисунке выше.

Этот демонстрационный адрес:Header With Slide Bar

attr() генерирует текстовое содержимое

Элементы могут иметь настраиваемые значения атрибутов, которые обычно именуются в форматеdata-*

attr()Используется для получения значения этого пользовательского атрибута элемента и присвоения его значению его псевдоэлемента.contentкак его сгенерированный контент

Используя эту функцию, мы можем использовать псевдоэлементы для «копирования» другого текста на основе исходного текста, как показано на следующем рисунке.

Это выглядит как-то грязно, не так ли? ок, добавьoverflow: hidden, чтобы скрыть лишний текст. Разбивая текст через JS и применяя чересстрочную анимацию, получается следующий эффект, о котором далее и пойдет речь в этой статье.overflowс завязанными глазами

Этот демонстрационный адрес:Staggered Float Text Menu

слепота переполнения

Я делал эффект кнопки вспышки раньше: когда мышь наводит на кнопку, свет проходит слева направо.

Автор использует градиент для имитации этого света.transform: translateX()панорамировать вправо

Но это явно неправильно, почему этот свет можно увидеть? Разве это не должно быть «заблокировано»?

Итак, добавляем к кнопкеoverflow: hidden, свет скрыт, когда свет находится за пределами кнопки

Этот демонстрационный адрес:Button Hover Shining

пользовательский ввод

По умолчаниюinputЧто, если это слишком уродливо? Затем сначала сотрите его и установитеopacity: 0Только что

а такжеinputтесно связанlabelЭлемент, потому что когда пользователь нажимаетlabelтакже срабатывает, когда элементinputизменение статуса. Используя эту функцию, можноlabelПользовательские стили не только в этом, но и вlabelдобавьте дополнительные элементы рядом с ним, используя селектор родственных элементов~Выберите их для определения стилей, используйте:checkedСлушатель псевдоклассаinputИзменение состояния плюс небольшая анимация сделаны правильноinputнастройка

насколько я могу судить,inputЭлементы также поддерживают псевдоэлементы, что наводит на другую идею: используйтеappearance: noneликвидироватьinputстиль по умолчанию, а затем настроить его с помощью псевдоэлементов, чтобыlabelВы можете сохранить его оригинальный стиль.

Этот демонстрационный адрес:Todo List

CSS-функции

Хорошо используйте некоторые функции CSS, вы также можете добавить много цвета в свою работу.

animation

включено сюдаtransitionа такжеtransform

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

Во-первых, используется анимация четырех границ в начале.overflowс завязанными глазами

Во-вторых, полоса использовала текст для использования анимации псевдоэлемента.

Наконец, последовательное появление социальных иконок использует поэтапную анимацию.

Этот демонстрационный адрес:Profile Card

border-radius

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

Если установлено50%Он круглый, что тоже очень часто

неправильная изогнутая форма

Настройка нескольких вершинborder-radiusМожет делать неправильные изогнутые края

Этот демонстрационный адрес:Nav Tab

box-shadow

Добавьте тень к коробке, увеличьте трехмерный эффект коробки, можно накладывать на несколько слоев и сделает тень более шелковистой.

Этот демонстрационный адрес:Pagination

внутреннее свечение

уведомлениеbox-shadowЕще одинinset, для освещения внутри коробки

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

Добавьте анимацию и эффекты фильтров, и «Алая луна» уже здесь!

Обратите внимание, что он излучает слабый красный свет, который на самом деле является эффектом фильтра размытия, примененного к двум псевдоэлементам.

Этот демонстрационный адрес:Crimson Crescent Loading

text-shadow

тень текста, по сути иbox-shadowТо же самое, но относительно текста, часто используется для подсветки текста, а также может использоваться для создания таких эффектов, как неоновый текст и псевдо-3D-текст посредством многослойных наложений.

светящийся текст

Этот демонстрационный адрес:Staggered GlowIn Text

Неоновый текст

Этот демонстрационный адрес:Neon Text

Псевдообъемный текст

Этот демонстрационный адрес:Staggered Bouncing 3D Loading

background-clip:text

Фон можно обрезать до основного цвета текста, который часто используется дляcolor: transparentСоздайте градиентный текст с помощью

Этот демонстрационный адрес:Menu Hover Fill Text

gradient

Градиенты можно использовать в качестве фонового изображения, они обладают сильными цветовыми эффектами и даже могут использоваться для имитации света.

linear-gradient

Линейный градиент является наиболее часто используемым градиентом.

В этой работе используется HTMLdialogметки, фоны с линейным градиентом, анимация иoverflowНепонятный метод, можете посмотреть внимательно :)

Этот демонстрационный адрес:Confirm Modal

radial-gradient

Радиальные градиенты часто используются для создания круглых фонов, как в приведенном выше примере.Снежный фонпредставляет собой эллиптический радиальный градиент

Кроме того, поскольку фон можно накладывать друг на друга, мы можем накладывать несколько радиальных градиентов с разными положениями и размерами для создания группы точек.Вместе с анимацией это создает эффект частиц без избыточности.divэлемент

Этот демонстрационный адрес:Particle Button

conic-gradient

Конические градиенты можно использовать для создания круговых диаграмм.

Наложите на круговую диаграмму псевдоэлемент и поместитеcontentУстановив определенное значение (это значение вычисляется переменными CSS), можно сделать эффект счетчика, и повязка на глаза в очередной раз выполнила свою миссию.

Этот демонстрационный адрес:Gauge (No SVG)

filter

фильтр в ПС,blurНаиболее используемое

эффект слияния

когдаblurФильтры иcontrastПри совместном использовании фильтры создают слияние (gooey) специфический эффект

Этот демонстрационный адрес:Snow Scratch

backdrop-filter

Примените фильтр к фону, чтобы создать эффект матового стекла.

Этот демонстрационный адрес:Frosted Glass

mix-blend-mode

Режим наложения в PS часто используется для специальных эффектов текста на заднем плане.

В следующем используется режим цветового фильтра (screen) для достижения эффекта текстовой видеомаски

Этот демонстрационный адрес:Video Mask Text

clip-path

Резка в PS может делать все виды неправильных форм. Было бы интересно в сочетании с анимацией

Этот демонстрационный адрес:Name Card Hover Expand

эффект глюка

из-заclip-pathСуществует функция обрезки, поэтому вы можете накладывать несколько текстов друг на друга, пропорционально разрезать их на несколько частей, а затем применять чересстрочную анимацию для создания классного эффекта сбоя (glitch).

Этот демонстрационный адрес:Cross Bar Glitch Text

mask

Маска в ПС. Так называемая маска означает, что исходное изображение показывает только непрозрачную часть изображения маски.

эффект пустоты

несмотря на то чтоclip-pathОн может вырезать форму, но не может быть выдолблен, потому что не может контролировать внутреннюю часть формы.

Некоторые люди (включая меня) могут использовать псевдоэлементы для «симуляции» выдолбления (установив тот же цвет фона), но на самом деле это не выдолбление, и оно будет видно, если вы измените фон или поплавок на изображении, тогда мы прибегнем к маскировке

Предположим, вы хотите сделать полое кольцо, тогда вы просто используете радиальный градиент в качестве маски элемента, и первыйcolor-stopустановить прозрачный, другойcolor-stopУстановите для него другой цвет, потому что определение маски состоит в том, чтобы отображать только непрозрачную часть изображения маски.

Примечание. Для сглаживания этот радиальный градиент должен иметь дополнительный элемент посередине.color-stopДля буферизации установите исходную длину плюс 0,5 пикселя.

Этот демонстрационный адрес:Circle Arrow Nav

-webkit-box-reflect

Эффект проекции, редко используемый, подходит для работ с сильным стереоскопическим эффектом.

Этот демонстрационный адрес:Card Flip Reflection

web animations

Хотя это не функция CSS, она часто используется для выполнения действий, недоступных CSS.

Так когда его использовать? Это естественно используется, когда в анимации CSS есть свойства, которые нельзя получить из CSS.

отслеживать положение мыши

В настоящее время не существует API для получения положения мыши в CSS, поэтому рассмотрите возможность использования для этого JS.

Проконсультировавшись с соответствующим API DOM, было обнаружено, что в API, который прослушивает события мыши, вы можете передатьe.clientXа такжеe.clientYчтобы получить текущую позицию мыши

Поскольку положение мыши может быть получено, отследить положение мыши несложно: отслеживаяmouseenterа такжеmouseleaveсобытие, чтобы получить положение мыши, когда она входит и выходит из элемента, и использовать эту координату в качестве расстояния смещения мыши, отслеживатьmousemoveсобытие, чтобы получить положение мыши при движении по элементу, а также использовать эту координату как расстояние смещения мыши, чтобы был достигнут эффект слежения за мышью

Этот демонстрационный адрес:Menu Hover Image

CSS Houdini

CSS Houdini — это базовый API CSS, который позволяет нам расширять функциональность CSS с помощью этого набора интерфейсов.

заставить градиент двигаться

В настоящее время мы не можем анимировать градиенты напрямую, потому что браузер не понимает, какой тип значения изменяется.

В этот момент мы можем использоватьCSS.registerProperty()чтобы зарегистрировать нашу пользовательскую переменную и объявить тип ее синтаксиса (syntax) — цветотип<color>, чтобы браузер мог понять и применить интерполяцию к цвету для анимации

Помните градиент конуса, упомянутый вышеconic-gradient()? Поскольку его можно использовать для создания круговой диаграммы, можем ли мы заставить круговую диаграмму двигаться? Ответ положительный, определите три переменные:--color1,--color2а также--pos,в--posТип синтаксиса - это процент длины<length-percentage>, измените его с0стали100%круговая диаграмма будет вращаться по часовой стрелке

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

Этот демонстрационный адрес:Mawaru

пасхальные яйца

Сдержанное меню в стиле героя, написанное с комбинацией поэтапной анимации и псевдоэлементов.

Этот демонстрационный адрес:Shinchou Menu

наконец

Поздравляем, вы закончили читать эту статью. Будь то визуальное пиршество, обучение или навигация прямо из букмарклета (смеется), сила CSS всегда превосходит ваше воображение. Пока ты смеешь творить, ты бог этого мира.