Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。

今日は、注目を集めるためにTikTokのロゴを研究します。

効果プレビュー:

これは主に新しい CSS3 属性mix-blend-mode 」で構成されており、白、赤、空色の 3 色があります。

では、まず「J」を完成させましょう。過去の経験に基づいて、3つの部分に分割しました。

段階的に実装してみましょう。

コンプリートシングル「J」

<div class="jitter">
    <div class="logo"></div>
</div>

スタイルを追加する

.ジッター{
  位置: 相対的;
  幅: 200ピクセル;
  マージン: 100px 自動;
}

// パート 1.logo {
  位置: 絶対;
  上: 0;
  左: 0;
  幅: 47px;
  高さ: 218px;
  zインデックス: 1;
  背景: #24f6f0;
}
// 2番目の部分.logo::after {
  コンテンツ： "";
  位置: 絶対;
  幅: 140ピクセル;
  高さ: 140px;
  境界線: 40px 実線 #24f6f0;
  border-right: 40px 透明の実線;
  border-top: 40px 透明の実線;
  border-left: 40px 透明の実線;
  上: -110px;
  右: -183px;
  境界線の半径: 100%;
  変換: 回転(45度);
  Zインデックス: -10;
}
// 3番目の部分.logo::before {
  コンテンツ： "";
  位置: 絶対;
  幅: 100ピクセル;
  高さ: 100px;
  境界線: 47px 実線 #24f6f0;
  border-top: 47px 透明の実線;
  境界線の半径: 50%;
  上: 121px;
  左: -147px;
  変換: 回転(45度);
}

最初の部分は長方形です。

2番目の部分はリングの1/4です

3番目の部分はリングの3/4です

「方法が間違っていれば、すべての努力は無駄になる」という格言があります。すべてのフロントエンドマスターは独自の学習方法を持っていますが、Webフロントエンドの学習方法は基本的に同じです。何も知らない初心者は、どのように学習すればよいのかまったくわかりません。これは、失敗の最も直接的な原因でもあります。したがって、Web フロントエンドを学習する際には、指導してくれる人が必要です。混乱の時期にあり、自分の進むべき方向が見つからない場合。フロントエンド学習交換グループ 784783012 に参加できます。分からないことがあれば、遠慮なく聞いてください。クリック: フロントエンド学習サークル

もう一つの「J」を追加

<div class="jitter">
    <div class="logo"></div>
    <div class="logo"></div>
</div>

スタイルを追加するだけで

...
// 上記のスタイルを省略します...
// 最初のJから10ピクセル離れたところ
.logo:最後の子{
  左: 10px;
  上: 10px;
  背景: #fe2d52;
  zインデックス: 100;
}
// red.logo:last-child::before {で塗りつぶす
  境界線: 47px 実線 #fe2d52;
  border-top: 47px 透明の実線;
}
.logo:last-child::after {
  境界線: 40px 実線 #fe2d52;
  border-right: 40px 透明の実線;
  border-top: 40px 透明の実線;
  border-left: 40px 透明の実線;
}

主人公登場 - mix-blend-mode

CSS3 では、非常に興味深いプロパティ、 mix-blend-modeが追加されました。 mix と blend の中国語訳はどちらも mixing なので、このプロパティの機能は文字通り混合ブレンドモードと翻訳されます。もちろん、通常は混合モードと呼びます。

ブレンドモードは Photoshop で最も一般的に使用されており、PS で最も強力な機能の 1 つです。 mix-blend-modeのどのようなプロパティを設定できるか見てみましょう。

mix-blend-mode: 標準; mix-blend-mode: 乗算; mix-blend-mode: スクリーン; mix-blend-mode: オーバーレイ; mix-blend-mode: 暗く; mix-blend-mode: 明るく; mix-blend-mode: カラードッジ; mix-blend-mode: カラーバーン; mix-blend-mode: ハードライト; mix-blend-mode: ソフトライト; mix-blend-mode: 差; mix-blend-mode: 除外; mix-blend-mode: 色相; mix-blend-mode: 彩度; mix-blend-mode: カラー; mix-blend-mode: 明度; mix-blend-mode: 初期;
ミックスブレンドモード: 継承;
ミックスブレンドモード: 設定なし;

次にmix-blend-mode:lightenを追加します

.logo:最後の子{
  ...
  ミックスブレンドモード: 明るくする;
}

効果をご覧ください:

大丈夫じゃないですか？

次に、2 番目の J が最初の J とゆっくりと結合するようにアニメーションを追加します。

アニメーションフュージョン

.logo:最後の子{
  ...
  アニメーション: 10 秒間無限移動;
}
@keyframes 移動 {
  0% {
    変換: translate(200px);
  }
  50% {
    変換: translate(0px);
  }
  100% {
    変換: translate(0px);
  }
}

最後に、最初の写真のプレビュー効果を実現できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: ビジネス HTML メール作成に関する提案

>>: JavaScriptで計算機機能を実現するプロセスの詳細な説明