純CSS怎么實(shí)現(xiàn)血輪眼+輪回眼特效
本篇內(nèi)容主要講解“純CSS怎么實(shí)現(xiàn)血輪眼+輪回眼特效”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“純CSS怎么實(shí)現(xiàn)血輪眼+輪回眼特效”吧!
目前累計(jì)服務(wù)客戶1000+，積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗(yàn)。以網(wǎng)站設(shè)計(jì)水平和技術(shù)實(shí)力，樹立企業(yè)形象，為客戶提供成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。成都創(chuàng)新互聯(lián)公司始終以務(wù)實(shí)、誠(chéng)信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過(guò)對(duì)領(lǐng)先技術(shù)的掌握、對(duì)創(chuàng)意設(shè)計(jì)的研究、對(duì)客戶形象的視覺傳遞、對(duì)應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。
效果（完整代碼在底部）
其實(shí)實(shí)現(xiàn)并不難，都是重復(fù)的代碼比較多。
實(shí)現(xiàn)（可跟著一步一步寫）：
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. 開始先定義血輪眼的基本樣式：
.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：給兩個(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);
}
}5. 設(shè)置眼球正中間的黑點(diǎn)，都是些定位大小啥的，然后設(shè)置動(dòng)畫然它慢慢變大：
.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)畫讓其顯示與旋轉(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);
}
}7. 制作三勾玉，先做一個(gè)圓，再用雙偽類制作一個(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);
先讓偽類為圓，再只設(shè)置一條邊框，圓弧形成，再定位在父元素上，形成勾玉。
8. 給勾玉設(shè)置動(dòng)畫，讓其從最中間變大旋轉(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)畫：
.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)畫，讓其變紫色。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)畫讓其變大：
.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ì)算，讓最開始的圈顯示在最上層。
animation：設(shè)置動(dòng)畫，讓輪回圈慢慢變大，同時(shí)變成紫色。
完整代碼：
<!DOCTYPE html>
<html>
<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>
<!-- 眼睛最中間那個(gè)黑點(diǎn) -->
<div>
<!-- 三勾玉所在的圈 -->
<div>
<!-- 三個(gè)勾玉 -->
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<!-- 輪回眼 -->
<div>
<!-- 眼睛最中間那個(gè)黑點(diǎn) -->
<div></div>
<!-- 3個(gè)輪回圈 -->
<div>
<span style="--r:2;"></span>
<span style="--r:3;"></span>
<span style="--r:4;"></span>
</div>
</div>
</body>
</html>到此，相信大家對(duì)“純CSS怎么實(shí)現(xiàn)血輪眼+輪回眼特效”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
本文題目：純CSS怎么實(shí)現(xiàn)血輪眼+輪回眼特效
本文鏈接：http://bm7419.com/article34/gejose.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、云服務(wù)器、軟件開發(fā)、域名注冊(cè)、標(biāo)簽優(yōu)化、網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
移動(dòng)網(wǎng)站建設(shè)知識(shí)
- 移動(dòng)網(wǎng)站建設(shè)時(shí)這些問(wèn)題千萬(wàn)不能出現(xiàn)！ 2021-04-28
- 移動(dòng)網(wǎng)站建設(shè)與電腦端網(wǎng)站建設(shè)有何不同？應(yīng)如何提高用戶體驗(yàn)？ 2022-10-28
- 智能手機(jī)與移動(dòng)網(wǎng)站建設(shè)的關(guān)系 2023-02-20
- 【網(wǎng)站建設(shè)】移動(dòng)網(wǎng)站建設(shè)的常見問(wèn)題匯總! 2022-01-17
- 移動(dòng)網(wǎng)站建設(shè)如何吸引用戶？ 2023-01-30
- 企業(yè)為什么要進(jìn)行移動(dòng)網(wǎng)站建設(shè)？ 2023-03-20
- 移動(dòng)網(wǎng)站建設(shè)需要考慮哪些問(wèn)題？ 2016-01-07
- 如何構(gòu)建移動(dòng)網(wǎng)站建設(shè)？ 2021-10-24
- 煙臺(tái)移動(dòng)網(wǎng)站建設(shè)：做手機(jī)網(wǎng)站如何保證一個(gè)較快的加載速度？ 2021-11-11
- 深圳移動(dòng)網(wǎng)站建設(shè)的五個(gè)原則 2022-05-13
- 移動(dòng)網(wǎng)站建設(shè)需要注意修補(bǔ)這些漏洞 2021-11-16
- 移動(dòng)網(wǎng)站建設(shè)的要點(diǎn)有哪些？ 2016-11-01