CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

この記事では、3D テキストのホバー変更効果を実現するための CSS3 のサンプル コードを紹介します。このコードは次のように共有されます。

html

<h1 class="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h1>

CS

.hover-text-3d {
    フォントサイズ: 7em;
}
.hover-text-3d {
    位置: 絶対;
    上位: 50%;
    左: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: 変換(-50%、-50%);
    -o-transform: 変換(-50%, -50%);
    変換: translate(-50%, -50%);
    -webkit-テキスト塗りつぶし色: #fff;
    テキスト塗りつぶし色: #fff;
}
.hover-text-3d:before {
    位置: 絶対;
    オーバーフロー: 非表示;
    幅: 0;
    コンテンツ: attr(データテキスト);
    -webkit-トランジション: 2s;
    -o-遷移: 2s;
    遷移: 2秒;
    -webkit テキストの塗りつぶし色: #aaf0d1;
    テキスト塗りつぶし色: #aaf0d1;
    -webkit-テキストのストローク幅: 2px;
    テキストのストロークの幅: 2px;
    -webkit テキスト ストロークの色: #aaf0d1;
    テキストストロークの色: #aaf0d1;
    -webkit-filter: ドロップシャドウ(5px 5px 5px rgba(0, 0, 0, .8));
    -o-filter:ドロップシャドウ(5px 5px 5px rgba(0, 0, 0, .8));
    フィルター: ドロップシャドウ(5px 5px 5px rgba(0, 0, 0, .8));
}
.hover-text-3d:hover:before {
    幅: 100%;
}

効果を見る

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

<<:  WMLタグの概要

>>:  MySQLの共通関数を使用してJSONを処理する方法

推薦する

Ubuntu 16.04 に nvidia ドライバー + CUDA + cuDNN をインストールする詳細なチュートリアル

準備1. GPUがCUDAをサポートしているかどうかを確認するlspci | grep -i nvi...

MySQL 8.0.12 クイックインストールチュートリアル

MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...

Vue3 での watchEffect の使用に関する簡単な分析

序文誰もが vue2 の watch API に精通している必要があります。vue2 の vue イ...

K8Sの高度な機能を理解するための記事

目次K8Sの高度な機能高度な機能要約するkubectl サービスの問題のトラブルシューティングK8S...

Dockerイメージをインポートおよびエクスポートする方法

この記事では、移行、バックアップ、アップグレードなどのシナリオで使用される Docker イメージの...

nginx+php実行リクエストの動作原理の詳細な説明

PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...

MySQL および Oracle のバッチ挿入 SQL の一般的な記述例

目次例えば:一般的な執筆:要約する例えば:次に、データベースのUSERテーブルにUserオブジェクト...

MySQL 5.7 でルートパスワードを変更する方法に関するチュートリアル

バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...

MySQLを5.7にアップグレードすると、WordPressはデータをインポートするときにエラー1067を報告します

最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...

Mysql データベースの日付と日時型でデフォルト値 0000-00-00 を設定するときに発生するエラー問題の詳細な説明

現象: MySQL バージョン 5.7 以降では、日付型と日付時刻型のデフォルト値が「0000-00...

自作メニューをクリックする効果を実現するJavaScript

この記事では、自作メニューをクリックする効果を実現するためのJavaScriptの具体的なコードを参...

MySQL ストアド プロシージャで if ステートメントを使用する詳細な例

この記事では、例を使用して、MySQL ストアド プロシージャでの if ステートメントの使用方法を...

Docker 階層化パッケージを使用して Spring Boot を設定する方法

Spring Boot プロジェクトでは、Docker コンテナ、jar、war の階層化パッケージ...

Linux で MongoDB のリモート自動バックアップを実装する方法

序文古いプロジェクトを引き継ぐ苦労 - MongoDB クラスターの学習と構築に関する前回の記事を読...