テキストの折り畳み特殊効果を実現する HTML+CSS の例

この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し、次のように共有します。

効果：

ここに画像の説明を挿入

成し遂げる：

1. タグを定義します。

 <h1>オーロラ</h1>

2. 基本的なテキストスタイルを設定します。

h1{
             テキスト変換:大文字;
             文字間隔: 3px;
             フォントサイズ: 15vw;
             変換: 回転(-10度) 傾斜(30度);
             位置: 相対的;
             色: rgba(0, 101, 253, 0.6);
             -webkit-テキストストローク: 2px rgba(0, 101, 253, 0.6);
             遷移: すべて 1; 
         }

text-transform: uppercase; 文字が大文字になります。
letter-spacing: 3px; 文字間隔。
transform: rotate(-10deg) skew(30deg); 最初に -10deg 回転し、次に 30deg 傾斜します。
-webkit-text-stroke: 2px rgba(0, 101, 253, 0.6); テキストの境界線の詳細
遷移: すべて 1; 遷移効果

3. マウスをテキストの上に置くと、テキストがインセットされます。

 h1:ホバー{
           /* 最初に白いレイヤーを重ね、次に黒いレイヤーを重ねます。白いレイヤーが黒いレイヤーを覆い、白い部分が明るくなり、黒い部分が暗くなります。*/
            テキストシャドウ:3px 3px 6px #fff,
            3px 3px 6px #fff、
            0 0 0px #000;           
         }

重要なのは、影を使って最初に白い影を重ね、次に白い影の後ろに黒い影を重ねることです。こうすることで、白い部分は明るく、黒い部分は暗くなり、くぼんだ効果が形成されます。

4. 二重疑似クラスを使用してテキストの上部を実装します (注: 二重疑似クラスは親要素の一部 CSS プロパティを継承します)。

h1::前{
             内容: 'オーロラ';
             色: rgb(255, 255, 255);
             位置: 絶対;
             上: 0;
             左: 0;
             クリップパス: インセット(0 0 50% 0);
             遷移: すべて 1;     
             変換: rotateX(0deg) skew(0deg);       

         }

位置: 絶対;
上: 0;
left: 0; 配置。
clip-path: inset(0 0 50% 0); テキストの上部半分だけを切り取って表示します。
transform: rotateX(0deg) skew(0deg); 今のところ回転も傾けもしません。

5. マウスをテキストの上部に移動すると、テキストが折りたたまれます。

 h1:hover::before{
            変換: rotateX(-30deg) skew(-30deg); 
           色: rgb(243, 243, 243);
           テキストシャドウ: 0 0 1px 黒;
            
         }

変換: rotateX(-30deg) skew(-30deg); -30deg 回転、-30deg 傾斜。
color: rgb(243, 243, 243); 色が暗くなります。
text-shadow: 0 0 1px 黒; 影。
6. 同じ目的で、下部を設定します。

 h1::after{
             内容: 'オーロラ';
             色: rgb(255, 255, 255);
             位置: 絶対;
             上: 0;
             左: 0;
             クリップパス: インセット(50% 0 0 0);
             遷移: すべて 1;     
             変換: rotateX(0deg) skew(0deg); 
            
         }
         h1:hover::after{
            変換: rotateX(40deg) skewX(20deg) ;
            色: rgb(212, 212, 212);
            テキストシャドウ: 0 0 1px 黒;
         }

完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
        体{
            高さ：100vh;
            幅：100vw;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
        }   
  
         h1{
             テキスト変換:大文字;
             文字間隔: 3px;
             フォントサイズ: 15vw;
             変換: 回転(-10度) 傾斜(30度);
             位置: 相対的;
             色: rgba(0, 101, 253, 0.6);
             -webkit-テキストストローク: 2px rgba(0, 101, 253, 0.6);
             遷移: すべて 1; 
         }
         h1:ホバー{
           /* 最初に白いレイヤーを重ね、次に黒いレイヤーを重ねます。白いレイヤーが黒いレイヤーを覆い、白い部分が明るくなり、黒い部分が暗くなります。*/
            テキストシャドウ:3px 3px 6px #fff,
            3px 3px 6px #fff、
            0 0 0px #000;           
         }
         h1::前{
             内容: 'オーロラ';
             色: rgb(255, 255, 255);
             位置: 絶対;
             上: 0;
             左: 0;
             クリップパス: インセット(0 0 50% 0);
             遷移: すべて 1;     
             変換: rotateX(0deg) skew(0deg);       

         }
         h1:hover::before{
            変換: rotateX(-30deg) skew(-30deg); 
           色: rgb(243, 243, 243);
           テキストシャドウ: 0 0 1px 黒;
            
         }
         h1::after{
             内容: 'オーロラ';
             色: rgb(255, 255, 255);
             位置: 絶対;
             上: 0;
             左: 0;
             クリップパス: インセット(50% 0 0 0);
             遷移: すべて 1;     
             変換: rotateX(0deg) skew(0deg); 
            
         }
         h1:hover::after{
            変換: rotateX(40deg) skewX(20deg) ;
            色: rgb(212, 212, 212);
            テキストシャドウ: 0 0 1px 黒;
         }
    </スタイル>
</head>
<本文>
   
    <h1>オーロラ</h1>

</本文>
</html>

html+css を使用してテキストの折りたたみの特殊効果を実現する例に関するこの記事はこれで終わりです。より関連性の高い html+css テキストの折りたたみコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: 階層化されたピラミッドを実現するための HTML+CSS の例

>>: CSS 極座標のサンプルコード