血輪眼輪迴眼特效 html+css
效果（完整代碼在底部）：
實現並不難，都是重複的代碼比較多。css
實現（可跟着一步一步寫）：
1. 先定義基本標籤：html
<!-- 血輪眼 -->
<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樣式：markdown
.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; 相對定位。oop
3. 開始先定義血輪眼的基本樣式：flex
.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. 設置眼球寬高等：ui
.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; 絕對定位 top: 50%; left: 50%; transform: translate(-50%,-50%); 居中對齊。 animation：設置動畫，讓其變紅色。forward：繼承最後一幀的屬性。 background-color: rgb(0, 0, 0); 黑色 background-color: rgb(255, 4, 4); 紅色。spa
5. 設置眼球正中間的黑點，都是些定位大小啥的，而後設置動畫然它慢慢變大：code
.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. 設置三勾玉所在的圈，設置動畫讓其顯示與旋轉：orm
.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); 旋轉720度。
7. 製做三勾玉，先作一個圓，再用雙僞類製做一個圓弧，二者結合就是勾玉了：
.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); 先讓僞類爲圓，再只設置一條邊框，圓弧造成，再定位在父元素上，造成勾玉。
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: '';
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: '';
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：設置動畫，讓輪迴圈慢慢變大，同時變成紫色。
完整代碼：
<!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">
<!-- 眼睛最中間那個黑點 -->
<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>
</body>
</html>
複製代碼
其它：
血輪眼，開~
熱烈宣佈（敲鑼打鼓，手舞足蹈），個人B站帳號地址：space.bilibili.com/176586698
淚目( Ĭ ^ Ĭ )
相關文章
- 1. 如何用PS做出血輪眼
- 2. Python：修煉寫輪眼
- 3. JS特效——輪播圖
- 4. iOS 輪播圖--特效
- 5. jquery特效（3）—輪播圖①（手動點擊輪播）
- 6. 輪詢/長輪詢
- 7. 高效輪子
- 8. 輪播效果
- 9. 【CSS】少年，你想擁有寫輪眼麼？
- 10. 火眼雲宣佈完成5000萬元A輪融資
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • Scala Trait(特徵) - Scala教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 如何用PS做出血輪眼
- 2. Python：修煉寫輪眼
- 3. JS特效——輪播圖
- 4. iOS 輪播圖--特效
- 5. jquery特效（3）—輪播圖①（手動點擊輪播）
- 6. 輪詢/長輪詢
- 7. 高效輪子
- 8. 輪播效果
- 9. 【CSS】少年，你想擁有寫輪眼麼？
- 10. 火眼雲宣佈完成5000萬元A輪融資