CSSアニメーションによるテーブルスクロールカルーセル効果の実装

CSSアニメーションによるテーブルスクロールカルーセル効果の実装

前回の CSS 回転灯と同じ内容の CSS アニメーションの応用です。これは単なる別のアプリケーションであり、具体的な実装は次のとおりです。

シート

<テンプレート>
  <セクション>
    <div class="box">
      <ul class="header">
        <li class="cell">シリアル番号</li>
        <li class="cell">名前</li>
        <li class="cell">年齢</li>
        <li class="cell">性別</li>
        <li class="cell">プロフェッショナル</li>
      </ul>
      <div class="body">
        <ul class="リスト">
          <li
            v-for="(item, index) in arr"
            :key="インデックス"
            クラス="行"
          >
            <span class="cell">{{ アイテム }}</span>
            <span v-for="(n) in 4" :key="n*30" class="cell">{{ n }}</span>
          </li>
        </ul>
      </div>
    </div>
  </セクション>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      編曲: [],
    }
  },
  作成された() {
    this.arr = Array.from(新しいArray(20), (v, k) => {
      k + 1を返す
    })
    // テーブルには 5 行のデータが表示されます。シームレス性を実現するために、ここでは最初の 5 行のデータをコピーします。this.arr = this.arr.concat(this.arr.slice(0, 5))
  }
}
</スクリプト>

<スタイル lang="scss">
セルの高さ: 30px;
ul {
  リストスタイル: なし;
  マージン: 0;
  パディング: 0;
}
。箱 {
  幅: 60%;
  マージン: 自動;
}
.ヘッダー{
  ディスプレイ: フレックス;
}
。体 {
  高さ: 5 * $cellHeight;
  オーバーフロー: 非表示;
  // パディング下部: 10px;
  li {
    ディスプレイ: フレックス;
    高さ: $cellHeight;
  }
}
.セル{
  フレックス: 1;
  高さ: $cellHeight;
  行の高さ: $cellHeight;
  境界線: 1px 実線 #e2e2e2;
  ボックスのサイズ: 境界線ボックス;
}
.リスト{
  アニメーション: 10 秒の線形無限スクロール。
  位置: 相対的;
}

@keyframes スクロール {
  { 先頭: 0; } から
  〜{ 上: -20 * $cellHeight }
}
</スタイル>

要約する

CSS アニメーションを使用してテーブル スクロール カルーセル効果を実現する方法についての記事はこれで終わりです。CSS アニメーション テーブル スクロール カルーセルに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Nginx リクエスト制限の設定方法

>>:  aタグ疑似クラスの機能と記述順序は何ですか?

推薦する

npmとcnpmを混在させる際の落とし穴の詳細な説明

目次原因理由NPM の紹介: CNPM の紹介:より良い方法方法の改善npm と cnpm を一緒に...

Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル

推奨される Docker 学習教材: https://www.runoob.com/docker/d...

MySQL における制限関数と合計関数の混在使用の問題の詳細な説明

序文今日、注文データを同期した後、同僚は、合計注文金額とデータソースの合計金額に差があったため、LI...

nginx.pid を開く際の失敗と無効の解決策

目次1. 問題の説明2. 問題分析3. 解決策解決策1: ディレクトリを作成する解決策2: 構成ファ...

MySQLインデックスが失敗するいくつかの状況の詳細な分析

1. 先頭のあいまいクエリではインデックスを使用できません (「%XX」や「%XX%」など)コード値...

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...

Flex モバイルレイアウトにおけるシングルラインレイアウトとダブルラインレイアウトの違いと使い方

レイアウトにul>liを使用した単一行レイアウトを以下に示します。 <ul class=...

MySQL 文字セットの文字化けとその解決方法

序文文字セットは、一連のシンボルとエンコード規則です。Oracle データベースでも MySQL デ...

webpackでvue環境を構築する際の異常なエラーを解決する

目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...

CSS で 2 列レイアウトを実現する N 通りの方法

1. 2 列レイアウトとは何ですか? 2 列レイアウトには、左側が固定幅で右側が適応幅のレイアウトと...

なぜCSSをヘッドタグに配置する必要があるのか

考えてみてください。なぜcss 、 javascriptのようにbodyタグの末尾ではなく、 hea...

MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

フロントエンド開発一般マニュアル(ツール、Webサイト、経験などを含む)

今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...

Nginx プロキシを使用してフロントエンドのクロスドメイン問題を解決する方法

序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...