Створення анімованого мистецтва CSS

Sep 11, 2025

Як

(Credit Image: Tiffany Chooong)

Створення зображень CSS - це цікавий спосіб практикувати свої навички та створити акуратний шматок ілюстрації. Це хороша перерва з звичайного повсякденного стилю веб-компонентів. Все, що вам потрібно буде розпочати, - це порожній документ та файл CSS; Ми рекомендуємо використовувати SASS, який дозволить вам повторно використовувати свої стилі та писати прості селектори (див. Наш гід Що таке сас? Докладніше про цей препроцесор).

Ми почнемо з деяких найкращих порад для оволодіння CSS Art, а потім покаже вам, як відтворити цю анімовану кулю Pikachu, використовуючи лише CSS (переконайтеся, що ви зберігаєте ваші файли в безпеці в гідному хмара зберігання ).

Для більш натхнення, вивчіть наш круглий час дивовижного Приклади анімації CSS . Після чогось більш базового? Почніть з навчання Як створити льоду Lolly за допомогою CSS .

Або, якщо ви починаєте новий сайт, обдурює складність з блискучим Веб-будівельник і переконайтеся, що ви отримаєте свій веб хостинг пляма на.

Зменшіть дизайн до простих форм

При створенні мистецтва CSS це може допомогти подивитися на кілька довідкових зображень для натхнення, а потім створити спрощену зміну мультиплікації, коли ви йдете, передбачаючи предмет, використовуючи примітивні форми, які роблять краще Форми CSS .

Використовуйте яскравий фон, щоб допомогти у позиціонуванні

При перекриванні форм подібних кольорів важко побачити, де вони розміщуються або те, як вони виглядають. Корисно мати форму, яку ви працюєте на виділенні, змінюючи Колір фону до чогось яскравого і веселого, як пурпур. Це дозволяє легко бачити точне положення та форму вашого елемента.

Використовуйте розміри рідини

Коли мова йде про визначення значення PX для властивостей, ми рекомендуємо використовувати пристрій REM. У випадку, якщо ви вирішите, що ви хочете, щоб ваша загальна частина була більшою або меншою, використовуючи одиниці REM, які потрібно змінити базу HTML {шрифт-розмір: ... PX} У вашій саса, щоб масштабувати всю художню роботу вгору або вниз.

При визначенні висот та ширини дитячих елементів, які повинні мати відносного розміру до батьків, відсоток утримуються. Оскільки ці цінності завжди відносно їхнього батька, вони також повинні масштабувати з html шрифт-розмір .

Generate CSS — Генерувати CSS - це конференція, яка принесла вам креативним блоком, мережею та веб-дизайнером. Натисніть, щоб забронювати свій ранній квиток на птахів! (Кредит зображення: Getty / Future)

01. Почніть з контейнерів

Контейнер для обгортки для утримання творів мистецтва - це гарне місце для початку. В межах контейнера ми можемо розмістити три внутрішні контейнери - голова, тіло і повітряні кулі.

 & lt; div class = "контейнер" & gt;
& lt; div class = "голова" & gt; & lt; / div & gt;
& lt; div class = "тіло" & gt; & lt; / div & gt;
& lt; div class = "повітряні кульки" & gt; & lt; / div & gt;
& lt; / div & gt;

Контейнер зазвичай повинен бути Позиція: відносна для того, щоб інші елементи будуть розміщені відносно всередині нього Позиція: Абсолют І мають чітко визначену висоту і ширину, інакше позиціонування дитячих елементів стає складним.

У ваших стилях додайте свої основні кольори, як Sass змінні для багаторатності. Sass полегшити () і темні () Функції створюватимуть відтінки та відтінки ваших кольорів, які можуть бути використані як основні моменти або тіні для вашого персонажа.

02. Стиль голови

З структурою зрозумів, давайте спочатку стилюємо голову. У цьому випадку голова робить хорошу центральну точку для ілюстрації, тому, а не встановити свою позицію до абсолютної, вона може бути встановлена відносно. Це дає змогу контейнеру мати стабільний елемент всередині нього, даючи іншим плаваючим абсолютним елементам анкерну точку і, таким чином, більше контролює над їх положенням.

Особливості обличчя потребують контейнера для позиціонування, тому створіть a & lt; div & gt; Всередині контейнера голови для жовтої форми з шириною, висотою та фоновим кольором - тепер давайте зробимо цей прямокутник виглядати більше, як форма голови. Одним з найпоширеніших та корисних властивостей в CSS Art є прикордонний радіус Властивість, яка змінює криву x або y кути коробки і може бути використана для створення більш органічних форм.

Використовуючи цю техніку з Combo REM та Percent Rem, ви можете зробити Blob-подібні форми, а не просто ellipses, які природно масштабується з html {шрифт-розмір: ... px} :

 .face {
Кордон-верхній лівий радіус: 50% 4.5REM;
Кордон-верхня правий радіус: 50% 4.5Rem;
Прикордонний нижній лівий радіус: 50% 3REM;
Кордон-нижній правий радіус: 50% 3REM;
...
}

Після вдосконалення голови прикордонний радіус , Посадайте інші функції обличчя як дитячі елементи голови, такі як очі, щоки, ніс і вуха. Як голова, прикордонний радіус Трюк приїжджає з часу Прикордонний радіус: 50% Може не виглядати привабливим.

03. Перемістіть до тіла

Тіло & lt; div & gt; можна помістити в контейнер для тіла за головою і у формі з тим же прикордонний радіус Техніка, а також руки, ноги та хвіст. Щоб дозволити правильний перекриття, фактичне тіло повинно бути власним елементом, оскільки певні внутрішні елементи, такі як задні смуги, повинні бути відрізані переповнений: прихований . Щоб дати тіло більш глибину, Перетворення: косою () майно може трохи тіло.

Хвіст блискавки може бути побудований за допомогою трьох окремих прямокутників, а не намагатися утворити цю форму з одного елемента. Прямокутники можуть бути повернуті і розташовані над вершиною одного, щоб утворити болт. Руки та ноги можуть використовувати темний первинний колір, який ми створили за допомогою SASS темні () так вони виділяються.

04. Додайте повітряні кулі

Тепер, коли електрична миша завершена, давайте пов'язувати повітряні кулі до спини. Додати & lt; div & gt; S із спільними стилями з дитиною & lt; div & gt; і позиціюйте їх, купляється над головою. Рядок невидимий, крім a ліворуч , які допомагають зробити його більш ниркою.

Зв'язати рядок навколо талії персонажа, a & lt; div & gt; можна розмістити в тілі, щоб дозволити правильне позиціонування. Рядок потребує невеликої кривої, щоб з'явитися, ніби прив'язані навколо тіла, тому він може мати невелику висоту, підсудний і a підсудний Лівий і правий радіус, який робить тонку вигнуту лінію:

.
Висота: 1рем;
Ширина: 9rem;
кордон-праворуч: суцільний 1px $ білий;
ліворуч: суцільний 1px $ білий;
кордон-дна: твердий 1px $ білий;
Прикордонний нижній лівий радіус: 50% 1REM;
Кордон-нижній правий радіус: 50% 1REM;
}

05. Анімація CSS

Ми можемо дати життєвий персонаж, додавши @Keyframes анімації. Руки, ноги, вуха та хвіст можуть бути анімовані Трансформування: обертання () . Переконатися перетворення-походження встановлено на "суглоб" (Top Top Center для ноги) і відрегулюйте обертання. Цей тип анімації можна використовувати кілька разів у SASS Mixin:

 @Mixin анімат ($ Name, $ Start, $ End) {
@Keyframes # {$ name} {
0%, 100% {Трансформування: обертання (# {$ start} deg)}
50% {Трансформування: Поверніть (# {$ END} DEG)}
}
}

Нарешті, додавання повільно 5s Трансформація: перекладач () Анімація KeyFrame буде анімація символу вгору і вниз, як ніби плаваюче. Для дотику реалізму, миготливий анімація Трансформація: масштабний (0,1) Власність може бути використана, щоб вона виглядала, як ніби очі закриваються.

Ця стаття була опублікована в журналі Creative Web-дизайну сітка . Купити проблему 283 або підписатися .

Читати далі:

5 речей, яких ви ніколи не знали про CSS
Додати фільтри SVG з CSS
Як код інтелектуального тексту з CSS

Створення анімованого мистецтва CSS

01. Почніть з контейнерів

02. Стиль голови

03. Перемістіть до тіла

04. Додайте повітряні кулі

05. Анімація CSS

Як - Найпопулярніші статті

Як намалювати троянду: початківець і просунуті поради

Як намалювати людину

Зрозуміти обробку природної мови

Створіть ефект хроматичного аберації

Створення динамічного руху в композиції

Імітуйте трансформацію примарного вершника

Намалюйте портрет стилю мону в Photoshop CC

Як використовувати фондову фотографію творчо в межах вашої дизайнерської роботи

Категорії