アニメーションCSSアートを作成する

Feb 10, 2026

操作方法

（イメージクレジット：ティファニー選責任）

CSSイメージの作成はあなたのスキルを練習し、きちんとしたアートワークを作成するための楽しい方法です。 Webコンポーネントの通常の日々のスタイリングからの素晴らしい休憩です。始める必要があるのは、空白の文書とCSSファイルです。 SASSを使用することをお勧めします。これにより、スタイルを再利用し、より単純なセレクタを書くことができます（私達のガイドを参照してください）。 SASSとは何ですか？ このプリプロセッサの詳細について）。

CSSアートをマスターするためのトップヒントから始めて、次にCSSのみを使用してこのアニメーションバルーンピカチュウを再作成する方法を説明します（必ず無視してください。 クラウドストレージ ）。

より多くのインスピレーションのために、私たちの驚くべきことの切り上げを探検してください CSSアニメーションの例 。もっと基本的なものの後？学習から始めます CSSを使用してICE LOLLYを作成する方法 。

あるいは、新しいサイトを始めている場合は、複雑さを鮮やかなものにしてください。 ウェブサイトビルダー そしてあなたがあなたを得ることを確認してください ウェブホスティング スポットオン。

設計を簡単な形に減らす

CSSアートを作成するとき、それはインスピレーションのためのいくつかの参照画像を見るのを助けることができ、それからあなたが行くように単純化された漫画のバリエーションを作成し、原始的な形を使用して主題を想像します。 CSSシェイプ 。

ポジショニングで助けるために明るい背景を使用してください

類似の色の形状を重ね合わせるとき、彼らがどこに配置されているか、またはそれらがどのように見えるかを見ることは困難です。変更して際立っている形をしている形をしても便利です。 背景色 マゼンタのように、明るく陽気なことに。これにより、要素の正確な位置と形状を簡単に確認できます。

流体サイズを使用してください

プロパティのPX値の定義になると、REMユニットを使用することをお勧めします。あなたがあなたがあなたがあなたの全体の部分をより大きくしたいと思ったと決心すると、REMユニットを使用してベースを変更しなければならないことを決定しました HTML {font-size：... px} あなたのSASSでアートワーク全体を上下に拡大縮小します。

親に比較的サイジングする必要がある子要素の高さと幅を定義するときは、パーセンテージが役立ちます。これらの値は常にそれらの親に対して相対的なものであるため、 HTMLフォントサイズ 。

Generate CSS — CSSを生成することは、Creative BloQ、Net、およびWeb Designerによってあなたに持ち込まれたオーダーメイドの会議です。あなたの早い鳥のチケットを予約するためにクリック！（イメージクレジット：getty /未来）

01.コンテナから始めます

アートワークのピースを保持するためのラッパーコンテナは、開始するのに良い場所です。容器内では、3つの内側の容器 - 頭、体、風船を配置することができます。

 divクラス= "コンテナ"＆gt。

容器は通常あるべきです ポジション：親戚 他の要素を比較的内側に配置することを可能にするために 位置：絶対値 明確に定義された高さと幅を持つ、そうでなければ子供の要素を位置づけることは困難になります。

あなたのスタイルで、再利用可能性のためにSASS変数として基本色を追加します。セラスの ライトン（） そして 暗く（） 関数は色の色合いと色合いを作成します。これは、キャラクタのハイライトまたは影として使用できます。

02.頭をスタイル

構造を考え出して、最初に頭をスタイルしましょう。この場合、ヘッドはアートワークのための素敵な中心点を作るので、その位置を絶対に設定するのではなく、それを相対的に設定することができる。これにより、容器はその内部の安定した要素を有することが可能になり、他の浮遊絶対要素にアンカーポイントが与え、したがってそれらの位置をより管理する。

顔の特徴は位置決めのためのコンテナを必要とするので、 ＆lt; div＆gt; 幅、高さ、背景色の黄色の形のヘッドコンテナの内側には、この長方形をヘッド形状のように見せましょう。 CSS Artで最も一般的で有用なプロパティの1つが 境界半径 箱の角のXまたはYの曲線を変えるプロパティで、より高い有機形状を作成するために使用できます。

REMとパーセントコンボを使用してこの手法を使用すると、単純な楕円ではなくBLOBのような形状を作ることができます。 html {フォントサイズ：... PX} ：

 .face {
ボーダートップ左半径：50％4.5rem;
ボーダートップ右半径：50％4.5rem;
境界底左半径：50％3rem;
境界底右半径：50％3rem;
...

ヘッドを完成させた後 境界半径 、目、頬、鼻や耳など、頭の児の要素として残りの顔の特徴を置きます。頭のように、 境界半径 トリックはそれ以来も便利になるでしょう 境界線：50％ 魅力的には見えないかもしれません。

03.体に移動します

body ＆lt; div＆gt; 頭の後ろに体の容器内に置くことができ、同じように形作ることができます 境界半径 技術、腕、脚、尾など。バックストライプのような特定の内部要素を切り取る必要があるため、適切な重なり合うことを可能にするためには、実際の体は独自の要素であるべきです。 オーバーフロー：hidden. 。体をより深くするために、 変換：skew（） 財産は体を少し滑ることができます。

雷ボルトテールは、1つの要素からこの形状を形成しようとするのではなく、3つの別々の長方形を使用して構築することができます。長方形を回転させて互いの上部に配置してボルトを形成することができる。腕と脚はSASSを使って作成したより暗い原色を使うことができます 暗く（） だから彼らは際立っています。

04.風船を加える

電気マウスが完成したので、バルーンを背中にネクタイしましょう。いくつか追加します ＆lt; div＆gt; ■子供の文字列を持つ共有スタイルが付いています ＆lt; div＆gt; そしてそれらを頭の上に置く位置を置きます。文字列は、Aを除いて不可視です 境界線 それはそれをもっと文字列のように見せるのに役立ちます。

文字の腰の周りに弦を結ぶために ＆lt; div＆gt; 適切な位置決めを可能にするために体内に配置することができます。文字列にはボディの周りに結ばれているように表示されるわずかな曲線が必要です。そのため、小さい高さを持つことができます。 ボーダーボトム そしてA ボーダーボトム 左右の半径、これは細く曲線を作る：

 String {
高さ：1REM;
幅：9レム;
境界右：堅い1ピクセル$ホワイト。
境界線：純$ $ WHITE。
ボーダーボトム：ソリッド1ピクセル$ホワイト。
境界底左半径：50％1REM;
境界底右半径：50％1REM;

05. CSSをアニメートします

私達は追加によってキャラクターの命を与えることができます @keyframes アニメーション。腕、脚、耳、尾はアニメーション化することができます 変換：回転（） 。確かめる 変換起源 「関節」（すなわち脚の上部中心）に設定され、回転を調整する。このアニメーションタイプはSASS MIXINで数回使用できます。

 @mixin animaterotate（$ name、$ start、$ end）{
@keyframes＃{$ name} {
0％、100％{変換：回転（＃{$ start} deg）}
50％{変換：回転（＃{$ END} DEG）}
}

最後に、遅い5Sを追加してください 変換：translatey（） キーフレームアニメーションは、浮いているかのようにキャラクターを上下にアニメートします。リアリズムの触れて、ブリンクのアニメーションを使って 変換：スケジュリー（0.1） プロパティは、目が閉じているかのように表示されるように使用できます。

この記事はもともとCreative Web Design Magazineで公開されました ネット 。 問題283を購入する または 申し込む 。

続きを読む：

あなたがCSSについて知らない5つのこと
CSSを含むSVGフィルタを追加します
CSSでスマートテキスト効果をコーディングする方法

アニメーションCSSアートを作成する

01.コンテナから始めます

02.頭をスタイル

03.体に移動します

04.風船を加える

05. CSSをアニメートします

操作方法 - 最も人気のある記事

首と肩を描く方法

マウス制御視差の背景効果を生み出す

Houdiniとのワークイメージマスクマジック

AIパワーチャットボットを構築する

ビューソースからJavaScriptコードを非表示にする方法

子供のためにアニメートすることを学ぶ

Mayaでポータル効果を作成する

Photoshop CCでの絵画効果を作成する

カテゴリ