Рисуем помаду с помощью CSS

внешний интерфейс CSS
Рисуем помаду с помощью CSS

предисловие

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

Той ночью Сяобао ворочался, долго думал, а потом заснул. Не могу играть в дерьмо все времяновый объект 🤣Ну, когда я проснулась утром, у Сяобао вдруг промелькнуло вдохновение, почему бы мне не нарисовать подарок, эм~ помада хороша, так что есть необъяснимая статья.

Изучив эту статью, вы получите:

  • Научитесь рисовать помадой
  • научиться рисовать цилиндр

фундамент

Прежде чем рисовать помаду, давайте разберем несколько основ:

  1. backgroundНесколько фонов:backgroundДопускается установка нескольких фонов.Перекрывающаяся часть фона сначала отображает установленный фон, а фон, установленный позже, закрывается.
  2. backgroundПоддерживает установку цвета градиента в качестве фона, если для верхней части цвета градиента установлено значениеtransparent, вы можете отобразить нижний цвет градиента, как в следующем случае:
.case {
    background: linear-gradient(pink, pink), radial-gradient(#00caf5 9px, transparent 10px);
}
.case2 {
    background: radial-gradient(#00caf5 9px, transparent 50px), pink;
}

Какая польза от этого эффекта? увидимся с помадой 😜

background-gradient.png

помада

Из изображения на обложке видно, что помада состоит из трех частей: основы помады, сердцевины помады и покрытия помады.

Разберем состав трех частей помады:

  • Основа помады состоит из трех цилиндров разной высоты.
  • Сердцевина помады состоит из овальных закругленных уголков и внутренней тени.
  • Крышка помады дополнена цилиндромlogoсостав слов

Итак, следующее внимание уделяется тому, как реализовать цилиндр!

рисунок цилиндра

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

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

background: 
    radial-gradient(
        ellipse 147px 49px at 50% 10%,
        #766768 12%,
        #5f686a 21%,
        rgba(0, 0, 0, 0) 23%
    ),
    linear-gradient(to right, #cce0e4 64%, #415557 88%);

yuanzhu1.png

Эй, это достигнуто, но, похоже, это не достигнуто.После верхнего эллипса есть дополнительный линейный градиент, а нижний - прямой угол.

Дно решить проще, ставимborder-radiusреализация угла эллипса

Для начала давайте проанализируем, почему:backgroundПри установке мультиградиентного фона верхний слой задаетtransparentЧасти будут отображать базовый фон градиента, что приведет к отображению частей базового градиента.

Поэтому есть два решения: одно — уменьшить область рендеринга линейных градиентов, другое — увеличить область рендеринга радиальных градиентов.

  1. Уменьшите область рендеринга линейного градиента

    Текущее направление сопоставления цветов линейного градиента:to right, поэтому мы корректируем направление градиента наto bottom,вперед9%цветtransparent

    background: 
    radial-gradient(
        ellipse 147px 49px at 50% 10%,
        #766768 12%,
        #5f686a 21%,
        rgba(0, 0, 0, 0) 23%
      ),
    linear-gradient(
        to bottom,
        transparent,
        transparent 9%,
        #cce0e4 10%,
        #415557 88%
    );

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

    yuanzhu2.png

  2. Увеличьте область рендеринга радиального градиента

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

    radial-gradient(ellipse 233px 165px at 50% 1%, #f7fdff 15%, rgba(0,0,0,0) 19%)

    yuanzhu3.png

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

    Основа помады состоит из трех частей, поэтому вы можете использовать элементы:before, :afterРеализация псевдоэлементного сотрудничества

ядро помады

Реализация ядра помады в основном делится на следующие три части:

  • фоновый проходradial-gradientСотрудничатьlinear-gradientвыполнить
  • форма черезborder-radiusреализация угла эллипса
  • проход нижней тениbox-shadow insetреализация внутренней тени
.tip {
    /* 椭圆角 */
    border-radius: 51px / 20px;
    border-top-left-radius: 59px 141px;
    border-top-right-radius: 59px 141px;
    /* 背景颜色 */
    background: 
        radial-gradient(ellipse 105px 181px at 50% 2%, #c10505 22%, rgba(0,0,0,0) 24%), 
        linear-gradient(to right, #c10505 50%, #9c1515 79%);
    /* 内阴影 */
    box-shadow: inset 0px -6px 11px #a00868;
}

помада анимация

После вышеперечисленных шагов красивая помада успешно нарисована~~~~~

kouhongwhole.png

Честно говоря, это так глупо, а как насчет ядра помады Сяобао? Кажется, что полдня усилий Xiaobao рисует ракушку.

Итак, давайте добавим немного анимации помаде, чтобы заставить помаду двигаться.

Xiaobao добавила три анимации для губной помады: анимация открытия крышки помады, анимация растяжения ядра помады и анимация общего вращения помады.Реализация анимации относительно проста.Вот код анимации растяжения ядра помады.

@keyframes tip {
  0% {
    height: 0px;
  }
  10% {
    height: 0px;
  }
  30% {
    height: 40px;
  }
  80% {
    height: 130px;
  }
  100% {
    height: 130px;
  }
}

Поддержка настройки

Губная помада марки Xiaobao, ее хорошо использовать, если вас не устраивает цвет ядра помады или цвет оболочки помады, вы можете перейти кВы все еще беспокоитесь об удовлетворительном цвете градиента? 10+ сайтов, которые помогут вам стать счастливымВыберите цветовую схему градиента, чтобы создать собственную помаду.

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

Репозиторий исходного кода

Портал:рисовать помадой

Не забудьте поставить пакету ⭐, если вы считаете его полезным.

Замечательные статьи в прошлом

послесловие

Друзья, если вы чувствуете, что эта статья вам полезна, ставьте лайк Абао👍 или подписывайтесь➕ — это самая большая поддержка для меня.

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

Категории