CSS реализует свободно летящую птицу 🐦

«Это 21-й день моего участия в ноябрьском испытании обновлений. Подробную информацию о мероприятии см.:Вызов последнего обновления 2021 г."

🎄 Предисловие

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

Это не может не удивлять меня,cssМир можно описать как глубокий, как море, люди любят его и ненавидят.

Я маленькая птичка, я хочу летать, но не могу летать высоко, я ищу одну, теплые объятия~~~ 🐤🐥🐥🐤

🍂 Давайте к делу, давайте вместе реализовывать вольную птицу🐦.

Изучив эту статью, вы сможете освоить следующие знания🍔:

borderРисование простых геометрических фигур.
transformиanimationзнание
Добудьте милую летающую птицу

📕 изучение пограничной собственности

borderЭто очень волшебное и очень могущественное свойство.borderМожно реализовать множество простых геометрических фигур.

Вот несколько примеров, чтобы научить васborderМеханизм рендеринга:

настраиватьdivизwidthиheightза0, установить четыре направленияborderРазные цвета.

border-left: 30px solid red;
border-right: 30px solid blue;
border-top: 30px solid green;
border-bottom: 30px solid pink;

Они установленыheight: 20px;width: 0 width: 20px;height:0иwidth: 20px;height:20px

Вышеприведенное изображение установлено в порядке шага 2

не заданоborder-top

Левое изображение показывает высоту: 20 пикселей без границы сверху; правое изображение показывает ширину: 20 пикселей без границы сверху

📄Рисование границ простое графическое резюме

Из приведенных выше трех случаев мы можем сделать вывод, чтоborderПравила рисования простых графиков со свойствами:

borderОн разделен на четыре направления, и в каждом направлении рисуется по одной части.Если ширина и высота равны0, каждое направление рисуется как треугольник, иначе как трапеция.
borderШирина - это высота нарисованной трапеции
heightОказать влияниеborder-leftиborder-right,widthОказать влияниеborder-topиborder-bottom(например, установка примера 2)
Когда одно направление не нарисовано,borderБудет рисовать только часть противоположного направления и рисовать только общее (например, настройка примера 3, она будет разрезана пополам)

🐣 Рисуем птиц

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

🐱‍🚀 Реализация заголовка

Голова представляет собой треугольник, смотрите прямо на код

/* 设置 bottom 显示， left/right 为透明 */
border-right: 15px solid transparent;
border-bottom: 30px solid #6b83fa;
border-left: 15px solid transparent;

🛫 Реализовать правое крыло

Правое крыло состоит из двух частей, прямоугольной трапеции и прямоугольного треугольника. пройти черезborderЧасть примера 3 показывает, что если вы не установитеborder-top,border-left/rightЭффект настройки также будет сокращен пополам, чтобы сформировать прямоугольную сторону.Мы можем использовать эту функцию для завершения настройки прямоугольных треугольников и прямоугольных трапеций.

Реализация прямоугольного треугольника

/* 设置 border-left， borde-bottom 为透明 */
border-left: 30px solid #c0a9e0;
border-bottom: 30px solid transparent;

Реализация прямоугольной трапеции

/* 设置 height 拉长 left 形成梯形效果 */
height: 30px;
border-left: 30px solid #8567f0;
border-bottom: 10px solid transparent;

🎈 Сборка птиц

сборка птицы

пройти черезposition: relativeиposition: absoluteСоберите графику, собранная птица выглядит так, как показано ниже.

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

Сделайте птицу более трехмерной

пройти черезtransform: rotateиtransform-originАтрибуты Поверните голову, хвост и крылья птицы, чтобы создать трехмерное ощущение.

Например заголовок:

/* 设置 transform 的基点 */
transform-origin: 50% 100%;
/* 沿 x 轴偏移，负值逆时针旋转*/
transform: rotateX(-20deg);

проходить черезrotateПреобразованная птица намного ярче.

🌀 Осознайте ветер

Реализация ветра не сложная, достигается через теги div и :before.

.wind {
    position: absolute;
    width: 4px;
    height: 200px;
    /* 风是移动的，通过 overflow 可以限制风的长度 */
    overflow: hidden;
}
.wind:before {
    before {
    content: "";
    position: absolute;
    width: 4px;
    height: 300px;
    background: rgba(100, 200, 207, 0.3);
    transform: translateY(-300px);
    -webkit-animation: wind 2331ms 1268ms linear infinite; 
    animation: wind 2331ms 1268ms linear infinite;
}

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

10Группаwindперекрываются, используяtransform: translate3dПриводить в порядокwindПоложение постоянно регулируется, и окончательный эффект выглядит следующим образом:

🎡 Пусть ветер дует

Принцип эффекта движения ветра очень прост: .wind установите высоту: 200px, она будет скрыта, если превысит 200px, а свойство animation можно использовать в псевдоклассе :before для перемещения трансляции ветра.

@-webkit-keyframes wind {
    0% {
        transform: translateY(-300px);
    }
    100% {
        transform: translateY(200px);
    }
}
.wind:before {
    transform: translateY(-300px);
    /* 设置每个风的延迟时间和持续时间都不相同 */
    animation: wind 2249ms 3544ms linear infinite;
}

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

🚀 Лети, птичка

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

Инициализировать 3D

настраиватьtransform-style: preserve-3dвключи3Dоказывать
настраиватьperspective: установите расстояние просмотра, чтобы летящие птицы выглядели более похожими на людей.
настраиватьdrop-shadow: Как у птиц в реальном мире может не быть теней?

Анимация двух крыльев

Самое главное, чтобы заставить птицу летать, это двигать крыльями и соответственно задавать две анимации.wingRightиwindLeft

/* 两翼翅膀的时针相反，因此动画是反的 */
@keyframes wingRight {
    0% {
        transform: rotateY(40deg);
    }
    100% {
        transform: rotateY(-40deg);
    }
}
@-webkit-keyframes wingLeft {
    0% {
        transform: rotateY(-40deg);
    }
    100% {
        transform: rotateY(40deg);
    }
}

После настройки анимации необходимо выполнить важный шаг.transform-origin, возьмем для примера правое крыло, крыло должно вращаться по красной линии кадра

transform-originПо умолчанию50% 50% 0, очевидно, что требования поворота не могут быть выполнены.Согласно знанию системы координат браузера, установлено правое крылоtransform-originза0 0, аналогичным образом установите левое крыло как100% 0

Общая анимация

Легкие полеты на самолете немного скучны и скучны.Как эльфы в небе, птицы должны летать свободно. добавить петлю к птицеzось360°Анимация вращения.

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

Портал:flybird

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

💥 Послесловие

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

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

Если вы чувствуете, что область комментариев неясна, вы также можете добавить мой WeChat (li444186976) или qq (3315161861) для подробного общения, имя - пакет поля битвы.