CSS эффект капли воды

CSS
CSS эффект капли воды

Привет, меня зовут Стивен.

На этом занятии будет рассказано, как использовать CSS для создания эффекта капли воды. Когда графика встречается, кажется, что они сливаются вместе. Я помню, что некоторые пользовательские интерфейсы Android также анимируются аналогичным образом при зарядке:

Видеоверсия этого урока находится по адресувоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооДобро пожаловать три подряд внимание!

часть HTML

Откройте редактор CodePen и добавьте новый<div>,classдаcontainer; добавить три<div>,classдаdrop, представляющий точку каплепадения.

Разделы CSS

На стороне CSS добавьте.containerСелектор,displayустановить какflex,justify-contentа такжеalign-itemsустановить какcenter,min-heightустановить как100vh, так что все в.containerЭлементы внутри контейнера центрированы, а цвет фона установлен на черный.

новыйbodyселектор, будетmarginустановить как0.

новый.dropселектор, чтобы установить ширину и высоту100px, цвет фона установлен на белый, а закругленные углы установлены на50%, Это станет кругом.

существует.containerгенерал-лейтенантflex-directionустановить какcolumn, так что три круга выровнены по вертикали.

затем в.dropВ селекторе добавьтеpositionустановить какabsolute, три круга перекрываются, и еще два.dropселекторы соответственно.drop:nth-child(2)указать второе и.drop:nth-child(3)Укажите третий.

Установите еще немного смещения, второй наборtransform: translateY(-80px), третья установкаtransform: translateY(-130px).

Принцип слияния точек воды

Тогда ключевая позиция здесь, сначала в.dropдобавить в селекторfilter: blur(20px), который добавляет параметр размытия к трем кругам:

затем в своих контейнерах,.containerвнутри, присоединяйтесьfilter: contrast(30), Улучшите контраст, чтобы оригинал мог размыть границу, за счет улучшения контраста перерисуйте реальный край, слитый вместе, чтобы добиться эффекта:

Другими словами, размытый край — это цвет от черного к серому и к белому, а эффект увеличения контраста заключается в том, что светло-серый воспринимается как белый, а темно-серый — как черный.

Как только вы поймете этот принцип, создание анимации не составит труда. Добавьте еще два элемента в HTML, которыеclassназванныйcollectionиз<div>, и<span>.

collectionКонтейнеры, используемые для имитации пунктов сбора, в то время как<span>просто добавьте к нему текст, например80%.

На стороне CSS добавьте.collectionселектор, с.dropселекторы примерно одинаковые, установите ширину и высоту на100px, цвет фона установлен на белый, а угол скругления установлен на50%,так же какfilterустановить какblur(20px).

ПрисоединяйсяspanСелектор,positionустановить какabsolute,font-familyшрифт установлен наHelvetica, затем установите размер текста на30px. ,

сделать анимацию

Теперь, чтобы начать анимацию, сначала присоединитесь@keyframes drop, чтобы оживить капли воды. Добавьте три блока, которые0%,50%а также100%.

0%Блок — это когда начинается анимация, добавляемtransformатрибут, сначала немного уменьшите его, установитеscale(.7), затем переместите его вверх, чтобы установитьtranslateY()Например-600%,Потомopacityустановить как0, чтобы капелька спряталась первой.

затем в50%В блоке добавьте такую ​​же настройку и задайтеscaleустановить как.4,translateYустановить как-80%, с установленной прозрачностью1, появятся капли воды.

опять таки100%внутри блока,scaleустановить как.3,translateYустановить как0px.

назад.dropселектор, присоединяйтесьopacityустановить как0, убедитесь, что капля скрыта в начале. Присоединяйсяanimation, установить как2.5s, название анимацииdrop, на этот раз мы будем использовать линейную скоростьlinear, и бесконечная анимация повтораinfinite.

Теперь вы можете видеть, что есть небольшой эффект падения воды, в:nth-child(2)а также:nth-child(3)селектор, поместите оригиналtransformНастройка убрана, а потом добавлена ​​настройка задержки воспроизведения анимации, а вторая капля воды задерживает.5s, задержка третьей капли.7s.

Теперь вы можете видеть, что эффект трех капель воды завершен:

снова дляcollectionДобавьте несколько анимационных эффектов в этот контейнер для сбора точек воды, добавьте@keyframes collection, также подготовьте три блока, которые0%,50%а также100%.

существует0%Присоединяйсяtransformсвойства, настройкиscale(1) rotate(0deg); затем в100%Добавьте те же настройки вrotateизменить на360deg, он обернется.

Ключевые изменения50%установлен в блоке,scaleустановить как1.3немного увеличить иrotateустановить как180deg, то ширина меняется на90px, чтобы анимация увеличивала масштаб и превращала круг в эллипс за один оборот.

Чтобы добавить больше случайных эффектов, в50%Внутри блока установите верхний левый угол настройки закругленного угла на40%, нижний левый угол установлен на45%.

назад.collectionселектор, присоединяйтесьanimation, анимация настроена на3s, название анимацииcollection, ускорение линейноеlinear, и та же бесконечная анимация повтораinfinite.

Давайте посмотрим на завершенный эффект этого случая

Это все для этого эпизода.

Исходный код для этого случая находится накод спрей.IO/стивен класс/боюсь...

Ваша поддержка-моя мотивация, пожалуйста, обратите вниманиеМинимальный класс CodingStartup, давайте работать вместе!

Категории