QQブラウザ機能を実装するためのCSS

QQブラウザ機能を実装するためのCSS

背景画像:
 線形グラデーション(方向、カラーストップ1、カラーストップ2、...);

コード

知識ポイント

1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する

2. CSS の linear-gradient() 関数は、線形グラデーション「イメージ」を作成するために使用されます。

価値説明する
方向角度値を使用して、グラデーションの方向 (または角度) を指定します。
カラーストップ1、カラーストップ2、…グラデーションの開始色と終了色を指定するために使用されます。

3. ブロックレベルラベルを中央揃えにする

位置:絶対;
残り:50%;
上位:50%;
左余白: 自身の幅の半分;
上マージン: 自身の高さの半分;

または:

位置:絶対;
残り:50%;
上位:50%;
変換:Xを移動(-50%)、Yを移動(-50%);

4. 連続効果を実行する:

①まず、背中合わせ効果の親ボックスに遠近感効果を追加します
背中合わせの効果の親ボックスに 3D 効果を追加します。transform-style: preserve-3d;
② バックフェイスの非表示属性を使用する: backface-visibility:hidden
③アニメーション効果、連続回転

5. リング回転効果

①カスタムアニメーション ②さまざまなXYZ角度を調整して回転効果を作成する

6. 失敗の影響

最初は、すべてのコンテンツを 2 倍の大きさにする現在のクラスがあります。画面が変わると、クラス名は削除されます。落下効果を実現するために、すべてのアニメーションは 1.5 秒以内に完了します。

ここに画像の説明を挿入
ここに画像の説明を挿入

7. 3 つの画面の線には回転と回転があります。公転は中心Qの周り、自転はY軸○の周りです。

操作効果


ここに画像の説明を挿入
ここに画像の説明を挿入ここに画像の説明を挿入

要約する

CSS で QQ ブラウザ機能を実装する方法についての記事はこれで終わりです。より関連性の高い CSS QQ ブラウザ コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  Linux Cron によるパラメータ付き PHP コードのスケジュール実行

>>:  Mysql-connector-java ドライバのバージョン問題の概要

推薦する

CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス

目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...

Vue における Vue.use() の原理と基本的な使用法

目次序文1. 例で理解する2. ソースコードを分析する3. まとめ要約する序文他の人のコンポーネント...

幅と高さが可変の要素を中央に配置するための CSS ソリューション

1. 水平中央公開コード: html: <div class="parent&quo...

MySQL での GROUP_CONCAT の使用例の分析

この記事では、例を使用して、MySQL で GROUP_CONCAT を使用する方法について説明しま...

MySQL max_allowed_pa​​cket 設定

max_allowed_pa​​cket は、受け入れるパケットのサイズを設定するために使用される ...

Reactコンポーネントをフルスクリーンにする方法

導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...

広告を閉じるための JavaScript カウントダウン

広告を閉じるまでのカウントダウンを実装するために JavaScript を使用するまだフロントエンド...

分散ロックの原理と3つの実装方法の詳細な説明

現在、ほぼすべての大規模な Web サイトとアプリケーションは分散方式で展開されています。分散シナリ...

SQL における distinct と row_number() over() の違いと使い方

1 はじめにデータベース内のデータを操作するための SQL 文を記述するときに、いくつかの不快な問題...

Vuex全体のケースの詳細な説明

目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...

MySQL 集計統計データの低速クエリの最適化

前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...

CentOS 7 ブートカーネルの切り替えとブートモードの切り替えの説明

Centos7 スイッチブートカーネル注: 必要に応じて、最初にyum update -yを実行して...

Reactはtodolistの追加、削除、変更、クエリを実装します

目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...

Vueカスタム命令の詳細な説明

目次Vueカスタムディレクティブカスタムディレクティブフック機能出力関連属性アプリケーション例要約す...