純CSS如何實現血輪眼+輪迴眼特效（代碼詳解）-css教學-PHP中文網

首頁

web前端

css教學

純CSS如何實現血輪眼+輪迴眼特效（代碼詳解）

青灯夜游

Jul 14, 2021 pm 06:13 PM

css

這篇文章跟大家介紹一下使用純CSS實現血輪眼輪迴眼特效的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

純CSS如何實現血輪眼+輪迴眼特效（代碼詳解）

效果（完整程式碼在底部）

其實實作並不難，都是重複的程式碼比較多。

實作（可跟著一步一步寫）：

1. 先定義基本標籤：

<!-- 純CSS如何實現血輪眼+輪迴眼特效（代碼詳解） -->
    <div class="zuo">
        <!-- 眼睛最中间那个黑点 -->
        <div class="zuoZong">
            <!-- 三勾玉所在的圈 -->
            <div class="zuoYu">
                <!-- 三个勾玉 -->
                <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{ 
            width: 250px;
            height: 120px;
            background-color: rgb(255, 255, 255);
            border-bottom: 5px solid rgb(70, 70, 70);
            overflow: hidden;
            position: relative;
        }

border-bottom: 5px solid rgb(70, 70, 70); 給個灰色的眼底。

overflow：溢出隱藏。

position: relative; 相對定位。

3. 開始先定義血輪眼的基本樣式：

.zuo{
            transform: translateX(-135px);
            border-radius: 0 120px 0 120px;
            box-shadow: inset 3px 2px 3px  rgba(17, 17, 17, 0.8);
        }

transform: translateX(-135px); 向左偏移，讓兩眼分開。

border-radius：為兩個角設定弧度，形成眼睛形狀。

bos-shadowL給眼角一點陰影。

4. 設定眼球寬高等：

.zuo::after{
            content: &#39;&#39;;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 95px;
            height: 95px;
            border-radius: 50%;
            border: 2px solid #000;
            animation: colour 2s linear forwards;
        }
        @keyframes colour{
            0%,30%{
                background-color: rgb(0, 0, 0);
            }
            100%{
                 background-color: rgb(255, 4, 4);
             }
         }

5. 設定眼球正中間的黑點，都是些定位大小啥的，然後設定動畫然它慢慢變大：

 .zuoZong{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 0px;
            height: 0px;
            border-radius: 50%;
            background-color: rgb(0, 0, 0);
            z-index: 1;
            animation: da 3s linear forwards;
        }
        @keyframes da{
            100%{
                width: 15px;
            height: 15px;
            }
        }

6. 設定三勾玉所在的圈，設定動畫讓其顯示與旋轉：

.zuoYu{
            position: absolute;
            top: -25px;
            left: -25px;
            bottom: -25px;
            right: -25px;
            border-radius: 50%;
            border: 2px solid rgb(0, 0, 0);
            animation: zhuan 2s linear 2s forwards;
            opacity: 0;
        }
        @keyframes zhuan{
           
            100%{
                opacity: 1;
                transform: rotate(720deg);
            }
        }

7. 製作三勾玉，先做一個圓，再用雙偽類製作一個圓弧，兩者結合就是勾玉了：

.zuoYu .yu{
             position: absolute;
             width: 15px;
             height: 15px;
             border-radius: 50%;
             background-color: rgb(0, 0, 0);

        }
        .zuoYu .yu::after{
            content: &#39;&#39;;
            position: absolute;
            top: -6px;
            left: -1px;
            width: 6px;
            height: 20px;
            border-radius: 50%;
            border-left: 6px solid rgb(0, 0, 0);
        }

border-radius: 50% ;

border-left: 6px solid rgb(0, 0, 0);

先讓偽類別為圓，再只設定一條邊框，圓弧形成，再定位在父元素上，形成勾玉。

8. 為勾玉設定動畫，讓其從最中間變大旋轉到勾玉所在的圈：

  .zuoYu .yu:nth-child(1){
            animation: yu1 2s ease-in 2s  forwards;
        }
        @keyframes yu1{
            0%{
                opacity: 0;
                left: 50%;
                top: 50%;                
                transform:translate(-50%,-50%)  scale(0.1) ;
            }
            100%{
                left: 50%;
                top: -9%;
                transform: scale(1) rotate(80deg);  
            }
        }

left: 50% ;
top: 50%; 在最中間。
opacity：透明。
scale(0.1)；縮小。
100%{…}到對應位置，同時變成不透明和放大成正常大小。

9. 一樣的，給其它兩個勾玉動畫：

.zuoYu .yu:nth-child(2){
            animation: yu2 2s ease-in 2s forwards; 
        }
        @keyframes yu2{
            0%{
                opacity: 0;
                left: 50%;
                top: 50%;
                
                transform: translate(-50%,-50%) scale(0.1) ;
            }
            100%{
                top: 60%;
                left: -9%;
                transform: scale(1) rotate(-60deg);  
            }
        }
        .zuoYu .yu:nth-child(3){          
            animation: yu3 2s ease-in 2s forwards;
        }
        @keyframes yu3{
            0%{
                opacity: 0;
                right: 50%;
                top: 50%;
                
                transform: translate(-50%,-50%) scale(0.1);
            }
            100%{
                top: 60%;
                right: -9%;
                transform: scale(1) rotate(180deg);  
            }
        }

10.給兩個眼睛都設定一個白點，相當於反光效果吧，至此血輪眼做完了：

.zuo::before,.you::before{
            content: &#39;&#39;;
            position: absolute;
            left: 38%;
            top: 30%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgb(255, 255, 255);
            z-index: 10;
        }

position: absolute;
left: 38%;
top: 30%; 定位對應的位置。
background-color: rgb(255, 255, 255); 白色。
z-index: 10; 設定為10，顯示在最上層。

11.設定輪迴眼基本css樣式，跟血輪眼一樣：

 .you{
            transform: translateX(135px);
            border-radius:  120px 0 120px 0;
            box-shadow: inset -3px 2px 3px  rgba(17, 17, 17, 0.8);
        }

12.設定眼球寬高等：

.you::after{
            content: &#39;&#39;;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 95px;
            height: 95px;
            border-radius: 50%;
            border: 2px solid #000;
            animation: youcolor 2s linear forwards;
         }
         @keyframes youcolor{
            0%,30%{
                background-color: rgb(0, 0, 0);
            }
            100%{
                 background-color: rgb(144, 130, 183);
             
             }
         }

position: absolute; 絕對定位
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中對齊。
animation：設定動畫，讓其變成紫色。 forward：繼承最後一格的屬性。
background-color: rgb(0, 0, 0); 黑色
background-color: rgb(144, 130, 183); 紫色。

13. 設定眼球最中間的黑點，跟血輪眼也差不多：

.dian{       
             position: absolute;
            top: 50%;
            left: 50%;              
            background-color: #000;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            z-index: 10;
            animation: youda 3s linear forwards;
         }
         @keyframes youda{
             0%{
                height: 0px;
            width: 0px;
             }
             100%{
                height: 15px;
            width: 15px;
             }
         }

14. 設定輪迴眼每個圈，同時設定動畫讓其變大：

 .youYu{
            position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
       }
       .quan{
           position: absolute;
           border-radius: 50%;
           border: 2px solid #000;
           z-index: calc(1 - var(--r));
           animation: zhi 2s ease-out 2s forwards;
       }
       @keyframes zhi{
           0%{
            top: calc(var(--r) * 1px);
           left: calc(var(--r) * 1px);
           right: calc(var(--r) * 1px);
           bottom: calc(var(--r) * 1px);
           }
           100%{
            top: calc(var(--r) * -35px);
           left: calc(var(--r) * -35px);
           right: calc(var(--r) * -35px);
           bottom: calc(var(--r) * -35px);

               background-color: rgb(187, 177, 214);
           }
       }

z-index: calc(1 - var(–r)); 計算，讓最開始的圈顯示在最上層。
animation：設定動畫，讓輪迴圈慢慢變大，同時變成紫色。

完整程式碼：




    
    
    
    Document

（學習影片分享：css影片教學）

以上是純CSS如何實現血輪眼+輪迴眼特效（代碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：csdn。如有侵權，請聯絡admin@php.cn刪除

兩個圖像和一個API：我們重新著色產品所需的一切Apr 15, 2025 am 11:27 AM

我最近找到了一種動態更新任何產品圖像的顏色的解決方案。因此，只有一種產品之一，我們可以以不同的方式對其進行著色以顯示

每周平台新聞：第三方代碼，被動混合內容，連接最慢的國家的影響Apr 15, 2025 am 11:19 AM

在本週的綜述中，燈塔在第三方腳本上闡明了燈光，不安全的資源將在安全站點上被阻止，許多國家連接速度

託管您自己的非JavaScript分析的選項Apr 15, 2025 am 11:09 AM

有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics（廣泛使用）

它全部都在頭上：管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM

該文檔負責人可能不是網站上最迷人的部分，但是其中所處的內容對於您的網站的成功也一樣重要

JavaScript中的Super（）是什麼？Apr 15, 2025 am 10:59 AM

當您看到一些稱為super（）的JavaScript時，在子類中，您會使用super（）調用其父母的構造函數和超級。訪問它

比較不同類型的本機JavaScript彈出窗口Apr 15, 2025 am 10:48 AM

JavaScript具有各種內置彈出API，它們顯示用於用戶交互的特殊UI。著名：

為什麼可訪問的網站如此難以構建？Apr 15, 2025 am 10:45 AM

前幾天，我與一些前端人們聊天，講述了為什麼這麼多公司努力創建可訪問的網站。為什麼可訪問的網站如此艱難

'隱藏”屬性顯然很弱Apr 15, 2025 am 10:43 AM

有一個HTML屬性，它可以正是您認為應該做的：

See all articles

熱AI工具

熱工具

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

SublimeText3漢化版

中文版，非常好用

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

mPDF

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

純CSS如何實現血輪眼+輪迴眼特效（代碼詳解）

實作（可跟著一步一步寫）：

完整程式碼：

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

DVWA

SublimeText3漢化版

MantisBT

SublimeText3 英文版

mPDF

熱門話題