プロジェクトの概要

3つの簡単な機能を実現しました.
1つ目はカードごとに追加する機能です.
2つ目の機能は、[検索](Search)ボタンをクリックすると、検索ウィンドウが表示されます.
3つ目はヒントカード情報ロード空間のskleton機能です.
コードはここです。!

1.拡張カード

学識

HTML

h 3はpanel div内に包まれている.そしてpanel divはcontainer div内に包まれる.このように小包を包んで、styleを適用すると、中の子供が影響を受けます.

<div class="container">
  <div
    class="panel"
    style="
          background-image: url('https://images.unsplash.com/photo-1638218022343-3158d732f5b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80');
        "
  >
    <h3>Rock</h3>
  </div>
</div>

CSS

絶対値になるには、h 3がパネルに相対値を与えなければならない.

flexの詳細については、ここを参照してください.

flexpropertyでは、他のパネルとは異なるサイズの変更を実行できます

Transitionの4番目のargsはdelayを表す.

JS

nullは0以上を表す.したがって、prevIndexをnullに設定し、次のコードを記述するとエラーが発生します.

let prevPanelIdx = null;
if (prevPanelIdx >= 0) {
  console.log(childrenNodes[prevPanelIdx]);
  childrenNodes[prevPanelIdx].classList.remove('active');
}

2.検索ボタンを展開

学識

CSS

何かを非表示または表示する場合は、absoulouteを使用して位置を変更して上書きし、activeクラス、transformを使用して表示します.

.btn {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: transform 0.3s ease;
}

.btn:focus,
.input:focus {
  outline: none;
}

.search.active .input {
  width: 200px;
}

.search.active .btn {
  transform: translateX(198px);
}

1.ドクロ

学識

CSS

線形-勾配では、角度は色の変化の方向を表します.

色10%とは、その色の10%のみを使用することを意味する.

画像サイズ制限=>max-width!

object-fitで当ててみましょうheight、widthを100%に設定すると、親のサイズが調整されます.(header img)

bgposアニメーションは、グレーのプレースホルダの位置を移動することによって実現されます.durationの半分は元の幅の50%に移動し、残りは-150%の位置に移動し、少し濃い灰色の部分を移動する効果があります.

HTML

author内はprofile/author-infoに分かれています.author-infoはnameとdateに分けられます.

<div class="card">
  <div class="card-header animated-bg" id="header"></div>
  <div class="card-content">
    <h3 class="card-title animated-bg animated-bg-text" id="title">&nbsp;</h3>
    <p class="card-excerpt" id="excerpt">
      &nbsp;
      <span class="animated-bg animated-bg-text">&nbsp;</span>
      <span class="animated-bg animated-bg-text">&nbsp;</span>
      <span class="animated-bg animated-bg-text">&nbsp;</span>
    </p>
    <div class="author">
      <div class="profile-img animated-bg" id="profile_img">
        <a id="profile-anchor" href="/hidden search bar/index.html"> </a>
      </div>
      <div class="author-info">
        <strong class="animated-bg animated-bg-text" id="name">&nbsp;</strong>
        <small class="animated-bg animated-bg-text" id="email">&nbsp;</small>
      </div>
    </div>
  </div>
</div>

 スペースを追加します.

アニメーションを追加する場所にanimated-bg、animated-bg-textクラスを追加します.