CSS3 で King of Glory マッチング人員読み込みページを実装する方法

King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜこの効果を達成したいのでしょうか?

まず、King of Glory はとても人気があり、e スポーツもとても人気があります。

2 番目: 主な目的は、CSS3 の線形、放射状グラデーション、回転、拡大縮小、アニメーションを学習することです。

グラフィカル分析

1. 背景（放射状グラデーション）

2. プレーヤー読み込みアニメーション（線形グラデーション）

3. 背景の中空回転四角形

4. 四角い文字の拡大アニメーション

5. テキストボタンの制作

上記の手順に従って実装してみましょう

背景制作

背景: 放射状グラデーション(中心、形状のサイズ、開始色、…、最後の色);

形状パラメータは形状を定義します。値は円または楕円になります。このうち、circle は円を表し、ellipse は楕円を表します。デフォルト値は楕円です

<スタイル>
  。王{
    位置: 相対的;
    高さ：25rem;
    幅: 100%;
    背景： 
      放射状グラデーション(円、#ccc、#161d4f 85%);
  }
</スタイル>
<div class="キング"></div>

CSS3 線形、放射状グラデーション、回転、拡大縮小、アニメーションにより、キングオブグローリーのマッチング要員読み込みアニメーションを実現

プレーヤー読み込み中

モジュールは全体的に垂直方向に中央揃えされ、線形グラデーションになっています。

背景: linear-gradient(方向/角度, color-stop1, color-stop2, …);

方向/角度はグラデーションの方向/角度を制御します。

<スタイル>
...
.player-layout{
  位置: 相対的;
  高さ：8rem;
  幅: 100%;
  背景： 
    線形グラデーション(右へ、#212f46、#212f4670、#212f46);
  上位: 50%;
  変換: translate(0,-50%);
  zインデックス: 10;
}
</スタイル>
<div class="キング">
  <div class="player-layout"></div>
</div>

CSS3 線形、放射状グラデーション、回転、拡大縮小、アニメーションにより、キングオブグローリーのマッチング要員読み込みアニメーションを実現

峡谷の画像、背景の線形グラデーション、回転を追加します。境界線を追加し、 box-shadowを使用して輝いているように見せます。

<スタイル>
...
。中心{
  位置: 絶対;
  高さ：8rem;
  幅: 8rem;
  上位: 50%;
  左: 50%;
  変身： 
    移動(-50%, -50%) 回転(45度);
  背景： 
    線形グラデーション(90度、#212f46、#5b99ff);
  境界線: .3rem 実線 #55a9ef;
  ボックスシャドウ: 0px 0px .8rem #88c0f0;
  パディング: .2rem;
}
.center画像{
  幅: 100%;
  高さ: 100%;
}
</スタイル>
<div class="キング">
  <div class="player-layout">
    <div class="center"><img src="../images/123123.jpg"></div>
  </div>
</div>

CSS3 線形、放射状グラデーション、回転、拡大縮小、アニメーションにより、キングオブグローリーのマッチング要員読み込みアニメーションを実現

次に、10 人のプレイヤーを 2 つのグループに分けて、峡谷の画像の両側に配置します。

<スタイル>
...
...
。グループ{
  位置: 相対的;
  幅: calc((100% - 13rem)/2);
  上位: 50%;
  変換: translate(0, -50%);
}
.group1{
  テキスト配置: 右;
  フロート: 左;
}
.group2{
  テキスト配置: 左;
  フロート: 右;
}
.palyer{
  幅: 4rem;
  高さ: 4rem;
  表示: インラインブロック;
  背景: url('../images/123123.jpg');
  背景サイズ: カバー;
  境界線: .3rem 実線 #55a9ef;
  ボックスシャドウ: 0px 0px .8rem #88c0f0;
}  
</スタイル>
...
<div class="player-layout">
  <div class="グループ グループ1">
    <div class="player1 プレイヤー"></div>
    <div class="player2 プレイヤー"></div>
    <div class="player3 プレイヤー"></div>
    <div class="player4 プレイヤー"></div>
    <div class="player5 プレイヤー"></div>
  </div>
  <div class="グループグループ2">
    <div class="player6 プレイヤー"></div>
    <div class="player7 プレイヤー"></div>
    <div class="player8 プレイヤー"></div>
    <div class="player9 プレイヤー"></div>
    <div class="player10 プレイヤー"></div>
  </div>
  <div class="center"><img src="../images/123123.jpg"></div>
</div>
...

ここで、各グループの幅はcalc()を使用して計算され、(100% - 長方形の対角線の長さ)/2 になります。

中央には、辺の長さが 8rem の正方形があります。したがって、対角線の長さ = 8rem の 2 乗 x 2 となり、平方根をとります。ここで、長方形の対角線の長さはおよそ 13rem に等しくなります。

各プレイヤーの境界に読み込みアニメーションを追加しましょう。

。プレーヤー{
  位置: 相対的;
  ...
  ...
  色: #fff;
}
.player::before、
.player::after {
  位置: 絶対;
  コンテンツ： '';
  上: 0;
  下部: 0;
  左: 0;
  右: 0;
  マージン: -8%;
  ボックスシャドウ: インセット 0 0 0 .3rem;
  アニメーション: clipMe 6s 線形無限;
}
.player::before {
  アニメーション遅延: -3秒;
}
@keyframes クリップミー {
  0%、
  100% {
    クリップ: rect(0, 4.8rem, 4.8rem, 4.3rem);
  }
  25% {
    クリップ: rect(0px, 4.8rem, .3rem, 0);
  }
  50% {
    クリップ: rect(0, .3rem, 4.8rem, 0);
  }
  75% {
    クリップ: rect(4.3rem, 4.8rem, 4.8rem, 0rem);
  }
}

主にclip属性が使用されます。

クリッププロパティは絶対配置された要素をクリップします。

画像がそれを含む要素よりも大きい場合はどうなりますか? 「clip」属性を使用すると、要素の表示サイズを指定して、その形状に合わせて要素をクリップして表示することができます。

有効な形状の値は次のとおりです: rect (上、右、下、左)

この特性は非常に興味深いので、興味のある人は注意深く研究することができます。

最後に、2 つのグループにハイライト効果を追加します。

.group::before、.group::after{
  位置: 絶対;
  コンテンツ： '';
  背景: 線形グラデーション(右へ、#212f4602、#7499d7、#212f4602);
  高さ: .3rem;
  幅: 10rem;
}
.group::before{
  上: -1.5rem;
}
.group::after{
  下部: -1.5rem;
}
.group1::before{
  右: 0;
}
.group1::after{
  右：5rem;
}
.group2::after{
  左: 5rem;
}

さて、まずはプレイヤー部分をこれに修正してみましょう。興味があればソースコードを取得してコーディングを続けてください。

背景の中空回転四角形

<div class="キング">
  <div class="player-layout">
    ...
  </div>
  <div class="matrix"></div>
</div>
<スタイル>
。マトリックス{
  位置: 絶対;
  高さ：17.6レム;
  幅：17.6rem;
  背景: #008cf4;
  上位: 50%;
  左: 50%;
  変身： 
    移動(-50%, -50%) 回転(45度);
  zインデックス: 1;
}
</スタイル>

ここの高さがなぜ17.6remなのでしょうか？

これもピタゴラスの定理 (a²+b²=c²) を使用して計算されます。対角線が容器の高さ 25rem であることがわかっているので、25x25/2 の平方根を取ることで答えを得ることができます。

上部に目立つ色があり、容器を置く場所を決めて美しくしましょう

<スタイル>
...
。国境{
  位置: 絶対;
  高さ：17.6レム;
  幅：17.6rem;
  テキスト配置: 中央;
}
.border::before、.border::after{
  位置: 絶対;
  表示: ブロック;
  幅: 100%;
  高さ：2.5rem;
  色: #fff;
  背景： 
    線形グラデーション(上へ、#212f4602、#7499d7);
}
.border1::before{
  コンテンツ: 'Web フロントエンド控除グループ 784783012';
}
.border1::after{
  下部: 0;
  内容: 「私と一緒に来なさい」
  変換: 回転(180度);
}
.border2{
  変換: 回転(90度);
}
.border2::before{
  内容: 「フロントエンドを学ぶ」
}
.border2::after{
  下部: 0;
  内容: 「自慢させてください」
  変換: 回転(180度);
}
</スタイル>
...
<div class="matrix">
  <div class="border border1"></div>
  <div class="border border2"></div>
</div>

2つのdiv要素を使用して境界線を作成し、境界線に線形グラデーションスタイルを追加します。

次に、白抜きの四角形を修正していきます。幅と高さは以前は17.6でしたが、境界線とパディングを追加したので削除します。

。マトリックス{
  位置: 絶対;
  /* 幅と高さを変更する */
  高さ：16.7レム;
  幅：16.7rem;
  上位: 50%;
  左: 50%;
  変換: 移動(-50%, -50%) 回転(45度);
  zインデックス: 1;
  /* 境界線と間隔を追加する */
  境界線: .1rem 実線 #7499d7;
  パディング: .4rem;
}
。国境{
  位置: 絶対;
  /* 幅と高さを変更する */
  高さ：16.7レム;
  幅：16.7rem;
  テキスト配置: 中央;
}

四角いテキストの拡大アニメーション

ここではテキストの影を作成します。スケーリングはまだ実装されていません。現在、スケーリングすると元のテキストが変更されるため、テキストの新しいコピーをコピーする必要があります。興味がある場合は試してみてください。

.border::before、.border::after{
  ...
  アニメーション: テキスト - 1.5 秒の線形無限;
}
@keyframes テキスト-an {
  0%{
    テキストシャドウ: 0 0 0 #ffffff;
  }
  100% {
    テキストシャドウ: 0 -6rem .4rem #ffffff10;
  }
}

テキストボタンの制作

台形を作成するには、:before および :after 疑似クラスを使用します。

<div class="キング">
  ...
  <div class="button">確認</div>
</div>
<スタイル>
。ボタン{
  位置: 相対的;
  背景: #3e3a31;
  幅: 6.5rem;
  高さ: 2rem;
  行の高さ: 2rem;
  色: #fff;
  上位: 50%;
  左: 50%;
  変換: translate(-50%, -50%);
  zインデックス: 11;
  テキスト配置: 中央;
  カーソル: ポインタ;
}
.button::before、.button::after{
  位置: 絶対;
  コンテンツ： '';
  表示: インラインブロック;
  幅: 0; 
  高さ: 0;
  境界線の幅: 1.43rem;
  境界線のスタイル: solid;
  境界線の色:
    #3e3a31 
    透明 
    透明  
    透明;
}
.button::before{
  変換: 回転(-135度);
  左: -1.40rem;
  上: -1.42rem;
}
.button::after{
  変換: 回転(135度);
  右: -1.43rem;
  上: -1.43rem;
}
</スタイル>