教你使用css制作出超級(jí)炫酷的血輪眼和輪回眼特效
csdn 發(fā)布時(shí)間：2023-04-24 15:10:14 作者：北極光之夜。 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用css制作出血輪眼和輪回眼特效,本文只使用了css+html技術(shù)，非常容易上手學(xué)習(xí)，火影里的血輪眼和輪回眼特效炫酷十足，喜歡的朋友快來(lái)看看是怎么制作的吧
效果（完整代碼在底部）：
實(shí)現(xiàn)并不難，都是重復(fù)的代碼比較多。
實(shí)現(xiàn)（可跟著一步一步寫(xiě)）：
1. 先定義基本標(biāo)簽：
<!-- 血輪眼 -->
<div class="zuo">
<!-- 眼睛最中間那個(gè)黑點(diǎn) -->
<div class="zuoZong">
<!-- 三勾玉所在的圈 -->
<div class="zuoYu">
<!-- 三個(gè)勾玉 -->
<span class="yu"></span>
<span class="yu"></span>
<span class="yu"></span>
</div>
</div>
</div>
<!-- 輪回眼 -->
<div class="you">
<!-- 眼睛最中間那個(gè)黑點(diǎn) -->
<div class="dian"></div>
<!-- 3個(gè)輪回圈 -->
<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); 給個(gè)灰色的眼底。 overflow：溢出隱藏。 position: relative; 相對(duì)定位。
3. 開(kāi)始先定義血輪眼的基本樣式：
.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); 向左偏移，讓兩眼分開(kāi)。 border-radius：給兩個(gè)角設(shè)置弧度，形成眼睛形狀。 bos-shadowL給眼角一點(diǎn)陰影。
4. 設(shè)置眼球?qū)捀叩龋?/strong>
.zuo::after{
content: '';
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);
}
}
position: absolute; 絕對(duì)定位 top: 50%; left: 50%; transform: translate(-50%,-50%); 居中對(duì)齊。 animation：設(shè)置動(dòng)畫(huà)，讓其變紅色。forward：繼承最后一幀的屬性。 background-color: rgb(0, 0, 0); 黑色 background-color: rgb(255, 4, 4); 紅色。
5. 設(shè)置眼球正中間的黑點(diǎn)，都是些定位大小啥的，然后設(shè)置動(dòng)畫(huà)然它慢慢變大：
.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. 設(shè)置三勾玉所在的圈，設(shè)置動(dòng)畫(huà)讓其顯示與旋轉(zhuǎn)：
.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);
}
}
position: absolute; top: -25px; left: -25px; bottom: -25px; right: -25px; 大小。 border-radius: 50%;圓形。 border: 2px solid rgb(0, 0, 0); 黑色邊框。 opacity：0；透明度為0； transform: rotate(720deg); 旋轉(zhuǎn)720度。
7. 制作三勾玉，先做一個(gè)圓，再用雙偽類(lèi)制作一個(gè)圓弧，兩者結(jié)合就是勾玉了：
.zuoYu .yu{
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
}
.zuoYu .yu::after{
content: '';
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); 先讓偽類(lèi)為圓，再只設(shè)置一條邊框，圓弧形成，再定位在父元素上，形成勾玉。
8. 給勾玉設(shè)置動(dòng)畫(huà)，讓其從最中間變大旋轉(zhuǎn)到勾玉所在的圈：
.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%{…}到對(duì)應(yīng)位置，同時(shí)變不透明和放大成正常大小。
9. 一樣的，給其它兩個(gè)勾玉動(dòng)畫(huà)：
.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.給兩個(gè)眼睛都設(shè)置一個(gè)白點(diǎn)，相當(dāng)于反光效果吧，至此血輪眼做完了：
.zuo::before,.you::before{
content: '';
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%; 定位相應(yīng)的位置。 background-color: rgb(255, 255, 255); 白色。 z-index: 10; 設(shè)置為10，顯示在最上層。
11.設(shè)置輪回眼基本css樣式，跟血輪眼一樣：
.you{
transform: translateX(135px);
border-radius: 120px 0 120px 0;
box-shadow: inset -3px 2px 3px rgba(17, 17, 17, 0.8);
}
12.設(shè)置眼球?qū)捀叩龋?/strong>
.you::after{
content: '';
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; 絕對(duì)定位 top: 50%; left: 50%; transform: translate(-50%,-50%); 居中對(duì)齊。 animation：設(shè)置動(dòng)畫(huà)，讓其變紫色。forward：繼承最后一幀的屬性。 background-color: rgb(0, 0, 0); 黑色 background-color: rgb(144, 130, 183); 紫色。
13. 設(shè)置眼球最中間的黑點(diǎn)，跟血輪眼也差不多：
.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. 設(shè)置輪回眼每個(gè)圈，同時(shí)設(shè)置動(dòng)畫(huà)讓其變大：
.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)); 計(jì)算，讓最開(kāi)始的圈顯示在最上層。 animation：設(shè)置動(dòng)畫(huà)，讓輪回圈慢慢變大，同時(shí)變成紫色。
完整代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.zuo , .you{
width: 250px;
height: 120px;
background-color: rgb(255, 255, 255);
border-bottom: 5px solid rgb(70, 70, 70);
overflow: hidden;
position: relative;
}
.zuo{
transform: translateX(-135px);
border-radius: 0 120px 0 120px;
box-shadow: inset 3px 2px 3px rgba(17, 17, 17, 0.8);
}
.zuo::after{
content: '';
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);
}
}
.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;
}
}
.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);
}
}
.zuoYu .yu{
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
}
.zuoYu .yu::after{
content: '';
position: absolute;
top: -6px;
left: -1px;
width: 6px;
height: 20px;
border-radius: 50%;
border-left: 6px solid rgb(0, 0, 0);
}
.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);
}
}
.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);
}
}
.zuo::before,.you::before{
content: '';
position: absolute;
left: 38%;
top: 30%;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
z-index: 10;
}
.you{
transform: translateX(135px);
border-radius: 120px 0 120px 0;
box-shadow: inset -3px 2px 3px rgba(17, 17, 17, 0.8);
/* filter: drop-shadow( 8px -5px 3px rgb(216, 59, 59));
*/ }
.you::after{
content: '';
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);
}
}
.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;
}
}
.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);
}
}
</style>
</head>
<body>
<!-- 血輪眼 -->
<div class="zuo">
<!-- 眼睛最中間那個(gè)黑點(diǎn) -->
<div class="zuoZong">
<!-- 三勾玉所在的圈 -->
<div class="zuoYu">
<!-- 三個(gè)勾玉 -->
<span class="yu"></span>
<span class="yu"></span>
<span class="yu"></span>
</div>
</div>
</div>
<!-- 輪回眼 -->
<div class="you">
<!-- 眼睛最中間那個(gè)黑點(diǎn) -->
<div class="dian"></div>
<!-- 3個(gè)輪回圈 -->
<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>
</body>
</html>
到此這篇關(guān)于使用css制作出血輪眼和輪回眼特效 的文章就介紹到這了,更多相關(guān)css血輪眼和輪回眼特效 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用CSS實(shí)現(xiàn)音波加載效果,技術(shù)上只使用了css+html,還是非常容易學(xué)習(xí)的，文中提供了詳細(xì)的代碼,需要的朋友可以參考下2023-04-28
CSS解決uniapp使用image標(biāo)簽圖片無(wú)法撐滿(mǎn)全屏問(wèn)題(最新解決方法)
這篇文章主要介紹了CSS解決uniapp使用image標(biāo)簽圖片無(wú)法撐滿(mǎn)全屏問(wèn)題(最新解決方法),本片文章主要講解了如何解決，開(kāi)發(fā)中遇到需要讓圖片撐滿(mǎn)全屏，但實(shí)際圖片會(huì)留空白的問(wèn)2023-04-23
使用css實(shí)現(xiàn)水波加載動(dòng)畫(huà)效果
這篇文章主要介紹了使用css實(shí)現(xiàn)水波加載動(dòng)畫(huà)效果,技術(shù)上只用到了css+html，還是非常容易學(xué)習(xí)的，做出來(lái)的效果也很不錯(cuò),需要的朋友可以參考下2023-04-23
CSS為HTML標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式，由于CSS2的大量普及應(yīng)用，逐漸的從CSS2開(kāi)始大家就簡(jiǎn)稱(chēng)為CSS，那么CSS3.0和CSS2.0有什么區(qū)別2023-04-18
CSS+JS實(shí)現(xiàn)動(dòng)態(tài)翻書(shū)效果
本文主要介紹了CSS+JS實(shí)現(xiàn)動(dòng)態(tài)翻書(shū)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-17
CSS中height:100vh和height:100%的區(qū)別
本文主要介紹了CSS中height:100vh和height:100%的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2023-04-06
通過(guò)HTML+CSS實(shí)現(xiàn)折疊樣式完整代碼
這篇文章主要介紹了通過(guò)HTML+CSS實(shí)現(xiàn)折疊樣式完整代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-03
CSS實(shí)現(xiàn)鼠標(biāo)懸停svg圖標(biāo)描邊效果
這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)懸停svg圖標(biāo)描邊效果,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-30
純CSS實(shí)現(xiàn)了下劃線(xiàn)的交互動(dòng)畫(huà)效果
本文主要介紹了純CSS實(shí)現(xiàn)了下劃線(xiàn)的交互動(dòng)畫(huà)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2023-03-06CSS 實(shí)現(xiàn)塊級(jí)元素靠右的方法
想要塊級(jí)元素居右往往設(shè)置 margin-right: 0 屬性是行不通的，下面介紹五種方法，不同場(chǎng)景適用不同方法，感興趣的朋友跟隨小編一起看看吧2023-03-06
