血の写輪眼と輪廻眼の特殊効果コードを実現するためのHTML+CSS

結果 (完全なコードは下部にあります):

ブラッドアイ

実装は難しくありませんが、繰り返しコードが多くなります。

実装（ステップごとに実行できます）：

1. まず基本的なタグを定義します。

<!-- 血の目-->
    <div class="zuo">
        <!-- 目の真ん中にある黒い点 -->
        <div class="zuoZong">
            <!-- 3 つの勾玉が配置されている円 -->
            <div class="zuoYu">
                <!-- 勾玉 3 個 -->
                <span class="yu"></span>
                <span class="yu"></span>
                <span class="yu"></span>
            </div>
        </div>
    </div>
    <!-- サムサラアイ-->
    <div class="you">
        <!-- 目の真ん中にある黒い点 -->
        <div class="dian"></div>
             <!-- 3 サイクル-->
            <div class="youYu">                        
                <span class="quan" style="--r:2;"></span>
                <span class="quan" style="--r:3;"></span>
                <span class="quan" style="--r:4;"></span>
            </div>       
    </div>

2. 左目と右目の基本的な CSS スタイルを定義します。

.zuo 、 .you{ 
            幅: 250ピクセル;
            高さ: 120px;
            背景色: rgb(255, 255, 255);
            下境界線: 5px 実線 rgb(70, 70, 70);
            オーバーフロー: 非表示;
            位置: 相対的;
        }

border-bottom: 5px solid rgb(70, 70, 70); は灰色の背景になります。
オーバーフロー: オーバーフローは非表示です。
position: relative; 相対的な配置。

3. まず、写輪眼の基本的なスタイルを定義します。

.zuo{
            変換: translateX(-135px);
            境界線の半径: 0 120px 0 120px;
            ボックスシャドウ: インセット 3px 2px 3px rgba(17, 17, 17, 0.8);
        }

transform: translateX(-135px); 目を離すために左にオフセットします。
border-radius: 目の形を形成する 2 つの角の半径を設定します。
bos-shadowL は目の角に少し影をつけます。

4. 目玉の幅や高さなどを設定します。

.zuo::after{
            コンテンツ： '';
            位置: 絶対;
            上位: 50%;
            左: 50%;
            変換: translate(-50%,-50%);
            幅: 95px;
            高さ: 95px;
            境界線の半径: 50%;
            境界線: 2px実線 #000;
            アニメーション: カラー 2 秒線形順方向;
        }
        @keyframes 色{
            0%,30%{
                背景色: rgb(0, 0, 0);
            }
            100%{
                 背景色: rgb(255, 4, 4);
             }
         }

位置: 絶対; 絶対位置
上位: 50%;
左: 50%;
transform: translate(-50%,-50%); 中央揃え。
アニメーション: 赤くなるようにアニメーションを設定します。 forward: 最後のフレームのプロパティを継承します。
背景色: rgb(0, 0, 0); 黒
背景色: rgb(255, 4, 4); 赤。

5. 目玉の中央に黒い点を配置し、位置とサイズを決めて、ゆっくりと大きくなるアニメーションを設定します。

 .zuoZong{
            位置: 絶対;
            上位: 50%;
            左: 50%;
            変換: translate(-50%,-50%);
            幅: 0px;
            高さ: 0px;
            境界線の半径: 50%;
            背景色: rgb(0, 0, 0);
            zインデックス: 1;
            アニメーション: da 3s リニアフォワード;
        }
        @keyframes da{
            100%{
                幅: 15px;
            高さ: 15px;
            }
        }

6. 3 つの勾玉が配置されている円を設定し、表示および回転するアニメーションを設定します。

.zuoYu{
            位置: 絶対;
            上: -25px;
            左: -25px;
            下: -25px;
            右: -25px;
            境界線の半径: 50%;
            境界線: 2px実線rgb(0, 0, 0);
            アニメーション: zhuan 2s 直線 2s 前進;
            不透明度: 0;
        }
        @keyframes zhuan{
           
            100%{
                不透明度: 1;
                変換: 回転(720度);
            }
        }

位置: 絶対;
上: -25px;
左: -25px;
下: -25px;
右: -25px; サイズ。
border-radius: 50%; 丸い。
border: 2px solid rgb(0, 0, 0); 黒い境界線。
不透明度: 0; 透明度は 0;
transform: rotate(720deg); 720度回転します。

7. 勾玉を 3 つ作るには、まず円を作り、次に double 疑似クラスを使用して円弧を作ります。この 2 つを組み合わせたものが勾玉になります。

.zuoYu .yu{
             位置: 絶対;
             幅: 15px;
             高さ: 15px;
             境界線の半径: 50%;
             背景色: rgb(0, 0, 0);

        }
        .zuoYu .yu::after{
            コンテンツ： '';
            位置: 絶対;
            上: -6px;
            左: -1px;
            幅: 6px;
            高さ: 20px;
            境界線の半径: 50%;
            左境界線: 6px 実線 rgb(0, 0, 0);
        }

境界線の半径: 50%;
左境界線: 6px 実線 rgb(0, 0, 0);
まず、疑似クラスを円にして、円弧を形成するために境界線を 1 つだけ設定し、それを親要素上に配置して勾玉を形成します。

8. 勾玉が大きくなり、中心から勾玉がある円まで回転するようにアニメーションを設定します。

.zuoYu .yu:nth-child(1){
            アニメーション: yu1 2秒のイーズイン 2秒前進;
        }
        @keyframes yu1{
            0%{
                不透明度: 0;
                左: 50%;
                上位: 50%;                
                transform:translate(-50%,-50%) スケール(0.1);
            }
            100%{
                左: 50%;
                上位: -9%;
                変換: スケール(1) 回転(80度);  
            }
        }

左: 50%;
上部: 50%; 中央。
不透明度: 透明。
scale(0.1); ズームアウトします。
対応する位置に100%{…}拡大し、同時に不透明になり通常サイズに拡大します。

9. 同様に、他の 2 つの勾玉も動かします。

.zuoYu .yu:nth-child(2){
            アニメーション: yu2 2s イーズイン 2s 前進; 
        }
        @keyframes yu2{
            0%{
                不透明度: 0;
                左: 50%;
                上位: 50%;
                
                変換: translate(-50%,-50%) スケール(0.1);
            }
            100%{
                上位: 60%
                左: -9%;
                変換: スケール(1) 回転(-60度);  
            }
        }
        .zuoYu .yu:nth-child(3){          
            アニメーション: yu3 2秒のイーズイン 2秒前進;
        }
        @keyframes yu3{
            0%{
                不透明度: 0;
                右: 50%;
                上位: 50%;
                
                変換: translate(-50%,-50%) スケール(0.1);
            }
            100%{
                上位: 60%
                右: -9%;
                変換: スケール(1) 回転(180度);  
            }
        }

10. 両目に反射効果に相当する白い点を設定します。これで写輪眼は完成です。

.zuo::before、.you::before{
            コンテンツ： '';
            位置: 絶対;
            左: 38%;
            上位: 30%
            幅: 12px;
            高さ: 12px;
            境界線の半径: 50%;
            背景色: rgb(255, 255, 255);
            zインデックス: 10;
        }

位置: 絶対;
左: 38%;
top: 30%; 対応する位置に配置しします。
背景色: rgb(255, 255, 255); 白。
z-index: 10; 10 に設定され、最上位レイヤーに表示されます。

11. Blood Eye と同じ、Samsara Eye の基本的な CSS スタイルを設定します。

。あなた{
            変換: translateX(135px);
            境界線の半径: 120px 0 120px 0;
            ボックスの影: インセット -3px 2px 3px rgba(17, 17, 17, 0.8);
        }

12. 目玉の幅や高さなどを設定します。

.you::after{
            コンテンツ： '';
            位置: 絶対;
            上位: 50%;
            左: 50%;
            変換: translate(-50%,-50%);
            幅: 95px;
            高さ: 95px;
            境界線の半径: 50%;
            境界線: 2px実線 #000;
            アニメーション: youcolor 2s リニアフォワード;
         }
         @keyframes あなた色{
            0%,30%{
                背景色: rgb(0, 0, 0);
            }
            100%{
                 背景色: rgb(144, 130, 183);
             
             }
         }

位置: 絶対; 絶対位置
上位: 50%;
左: 50%;
transform: translate(-50%,-50%); 中央揃え。
アニメーション: 紫色に変わるアニメーションを設定します。 forward: 最後のフレームのプロパティを継承します。
背景色: rgb(0, 0, 0); 黒
背景色: rgb(144, 130, 183); 紫。

13. 写輪眼と同じように、眼球の真ん中に黒い点を配置します。

.dian{       
             位置: 絶対;
            上位: 50%;
            左: 50%;              
            背景色: #000;
            変換: translate(-50%,-50%);
            境界線の半径: 50%;
            zインデックス: 10;
            アニメーション: youda 3s リニアフォワード;
         }
         @keyframes あなた{
             0%{
                高さ: 0px;
            幅: 0px;
             }
             100%{
                高さ: 15px;
            幅: 15px;
             }
         }

14. サムサラアイの各円を設定し、アニメーションを大きくするように設定します。

.youYu{
            位置: 絶対;
          上位: 50%;
          左: 50%;
          変換: translate(-50%,-50%);
       }
       .quan{
           位置: 絶対;
           境界線の半径: 50%;
           境界線: 2px実線 #000;
           zインデックス: calc(1 - var(--r));
           アニメーション: zhi 2s イーズアウト 2s 前進;
       }
       @keyframes ジ{
           0%{
            上: calc(var(--r) * 1px);
           左: calc(var(--r) * 1px);
           右: calc(var(--r) * 1px);
           下部: calc(var(--r) * 1px);
           }
           100%{
            上: calc(var(--r) * -35px);
           左: calc(var(--r) * -35px);
           右: calc(var(--r) * -35px);
           下部: calc(var(--r) * -35px);

               背景色: rgb(187, 177, 214);
           }
       }

z-index: calc(1 - var(–r)); 最初の円が最上位レイヤーに表示されるように計算します。
アニメーション：転生円が徐々に大きくなり、紫色に変わるアニメーションを設定します。

完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
        体{
            高さ：100vh;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            背景色: #000;
        }
        .zuo 、 .you{ 
            幅: 250ピクセル;
            高さ: 120px;
            背景色: rgb(255, 255, 255);
            下境界線: 5px 実線 rgb(70, 70, 70);
            オーバーフロー: 非表示;
            位置: 相対的;
        }
         
        .zuo{
            変換: translateX(-135px);
            境界線の半径: 0 120px 0 120px;
            ボックスシャドウ: インセット 3px 2px 3px rgba(17, 17, 17, 0.8);
        }
        .zuo::after{
            コンテンツ： '';
            位置: 絶対;
            上位: 50%;
            左: 50%;
            変換: translate(-50%,-50%);
            幅: 95px;
            高さ: 95px;
            境界線の半径: 50%;
            境界線: 2px実線 #000;
            アニメーション: カラー 2 秒線形順方向;
        }
        @keyframes 色{
            0%,30%{
                背景色: rgb(0, 0, 0);
            }
            100%{
                 背景色: rgb(255, 4, 4);
             }
         }

        .zuoZong{
            位置: 絶対;
            上位: 50%;
            左: 50%;
            変換: translate(-50%,-50%);
            幅: 0px;
            高さ: 0px;
            境界線の半径: 50%;
            背景色: rgb(0, 0, 0);
            zインデックス: 1;
            アニメーション: da 3s リニアフォワード;
        }
        @keyframes da{
            100%{
                幅: 15px;
            高さ: 15px;
            }
        }
        .zuoYu{
            位置: 絶対;
            上: -25px;
            左: -25px;
            下: -25px;
            右: -25px;
            境界線の半径: 50%;
            境界線: 2px実線rgb(0, 0, 0);
            アニメーション: zhuan 2s 直線 2s 前進;
            不透明度: 0;
        }
        @keyframes zhuan{
           
            100%{
                不透明度: 1;
                変換: 回転(720度);
            }
        }
        .zuoYu .yu{
             位置: 絶対;
             幅: 15px;
             高さ: 15px;
             境界線の半径: 50%;
             背景色: rgb(0, 0, 0);

        }
        .zuoYu .yu::after{
            コンテンツ： '';
            位置: 絶対;
            上: -6px;
            左: -1px;
            幅: 6px;
            高さ: 20px;
            境界線の半径: 50%;
            左境界線: 6px 実線 rgb(0, 0, 0);
        }
        .zuoYu .yu:nth-child(1){
            アニメーション: yu1 2秒のイーズイン 2秒前進;
        }
        @keyframes yu1{
            0%{
                不透明度: 0;
                左: 50%;
                上位: 50%;
                
                transform:translate(-50%,-50%) スケール(0.1);
            }
            100%{
                左: 50%;
                上位: -9%;
                変換: スケール(1) 回転(80度);  
            }
        }       
        .zuoYu .yu:nth-child(2){
            アニメーション: yu2 2s イーズイン 2s 前進; 
        }
        @keyframes yu2{
            0%{
                不透明度: 0;
                左: 50%;
                上位: 50%;
                
                変換: translate(-50%,-50%) スケール(0.1);
            }
            100%{
                上位: 60%
                左: -9%;
                変換: スケール(1) 回転(-60度);  
            }
        }
        .zuoYu .yu:nth-child(3){          
            アニメーション: yu3 2秒のイーズイン 2秒前進;
        }
        @keyframes yu3{
            0%{
                不透明度: 0;
                右: 50%;
                上位: 50%;
                
                変換: translate(-50%,-50%) スケール(0.1);
            }
            100%{
                上位: 60%
                右: -9%;
                変換: スケール(1) 回転(180度);  
            }
        }
        .zuo::before、.you::before{
            コンテンツ： '';
            位置: 絶対;
            左: 38%;
            上位: 30%
            幅: 12px;
            高さ: 12px;
            境界線の半径: 50%;
            背景色: rgb(255, 255, 255);
            zインデックス: 10;
        }
        。あなた{
            変換: translateX(135px);
            境界線の半径: 120px 0 120px 0;
            ボックスの影: インセット -3px 2px 3px rgba(17, 17, 17, 0.8);
/* フィルター: ドロップシャドウ( 8px -5px 3px rgb(216, 59, 59));
 */ }
         .you::after{
            コンテンツ： '';
            位置: 絶対;
            上位: 50%;
            左: 50%;
            変換: translate(-50%,-50%);
            幅: 95px;
            高さ: 95px;
            境界線の半径: 50%;
            境界線: 2px実線 #000;
            アニメーション: youcolor 2s リニアフォワード;
         }
         @keyframes あなた色{
            0%,30%{
                背景色: rgb(0, 0, 0);
            }
            100%{
                 背景色: rgb(144, 130, 183);
             
             }
         }
         
         .dian{       
             位置: 絶対;
            上位: 50%;
            左: 50%;              
            背景色: #000;
            変換: translate(-50%,-50%);
            境界線の半径: 50%;
            zインデックス: 10;
            アニメーション: youda 3s リニアフォワード;
         }
         @keyframes あなた{
             0%{
                高さ: 0px;
            幅: 0px;
             }
             100%{
                高さ: 15px;
            幅: 15px;
             }
         }
         .youYu{
            位置: 絶対;
          上位: 50%;
          左: 50%;
          変換: translate(-50%,-50%);
       }
       .quan{
           位置: 絶対;
           境界線の半径: 50%;
           境界線: 2px実線 #000;
           zインデックス: calc(1 - var(--r));
           アニメーション: zhi 2s easy-out 2s forwards;
       }
       @keyframes ジ{
           0%{
            上: calc(var(--r) * 1px);
           左: calc(var(--r) * 1px);
           右: calc(var(--r) * 1px);
           下部: calc(var(--r) * 1px);
           }
           100%{
            上: calc(var(--r) * -35px);
           左: calc(var(--r) * -35px);
           右: calc(var(--r) * -35px);
           下部: calc(var(--r) * -35px);

               背景色: rgb(187, 177, 214);
           }
       }
    </スタイル>
</head>
<本文>
    <!-- 血の目-->
    <div class="zuo">
        <!-- 目の真ん中にある黒い点 -->
        <div class="zuoZong">
            <!-- 3 つの勾玉が配置されている円 -->
            <div class="zuoYu">
                <!-- 勾玉 3 個 -->
                <span class="yu"></span>
                <span class="yu"></span>
                <span class="yu"></span>
            </div>
        </div>
    </div>
    <!-- サムサラアイ-->
    <div class="you">
        <!-- 目の真ん中にある黒い点 -->
        <div class="dian"></div>
             <!-- 3 サイクル-->
            <div class="youYu">                        
                <span class="quan" style="--r:2;"></span>
                <span class="quan" style="--r:3;"></span>
                <span class="quan" style="--r:4;"></span>
            </div>       
    </div>
</本文>
</html>

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

<<: CSS3のtransform属性で実装される4つの機能

>>: