CSS实现火影忍者各种眼睛的实现和变换

最新推荐文章于 2024-05-17 08:05:25 发布

weixin_33966095

最新推荐文章于 2024-05-17 08:05:25 发布

阅读量289

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/forri/p/5645870.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eyes</title>
<link rel="stylesheet" href="basic-eye.css">
<link rel="stylesheet" href="syaringan.css">
<link rel="stylesheet" href="magekyou.css">
<link rel="stylesheet" href="">

</head>
<body>
<div id="face">
<div class="eye left">
<div class="shadow"></div>
<div class="absolute-center basic-iris-pupil">
<div class="light"></div>
</div>
<div class="absolute-center sya-iris-pupil" >
<div class="light"></div>
<div class="yasakas">
<div class="absolute-center yasaka top">
</div>
<div class="absolute-center yasaka left">
</div>
<div class="absolute-center yasaka right">
</div>
</div>
</div>

</body>
</html>

basic-eye.css：

#face{
width:640px;
height:200px;
background-color: black;
}
.absolute-center{
position: absolute;
left:0;
top:0;
right:0;
bottom: 0;
margin:auto;
}
@keyframes ani-eye {
to{
border-radius:0 90% 0 55px;
}
}
.eye{
position: relative;
width:130px;
height:70px;
background-color: white;
border:1px solid black;
/* transform:skew(15deg,15deg);*/
transform:skewX(15deg);
border-radius:0 70px 0 50px;
overflow: hidden;
transition:all 200ms ease 0s;
animation:ani-eye 1s ease 2s;
animation-fill-mode: backwards;
}
.eye.left{
float:left;
margin-left:94px;
margin-top:40px;
}
.eye.right{
float:right;
margin-right:94px;
margin-top:40px;
transform: rotateY(180deg) skewX(15deg);;
}
#face:hover .eye,#face:hover .shadow{
border-radius:0 90% 0 55px;
}
.shadow{
position: absolute;
left:0;
top:0;
z-index:2;
width:100%;
height:100%;
border-radius:0 70px 0 50px;
box-shadow: 5px 12px 2px 5px rgba(0,0,0,.25) inset;
transition:all 200ms ease 0s;
}
@keyframes ani-basic {
to{
z-index: -10;
}
}
.basic-iris-pupil{
background-color: black;
border-radius:50%;
width:10px;
height:10px;
box-shadow:0 0 0 12px #141313,
0 0 0 24px #1E1C1B,
0 0 2px 32px #221F1E;
transform:skewX(-15deg);
animation: ani-basic 0s ease 2s;
animation-fill-mode: both;
}
.basic-iris-pupil .light{
position: absolute;
left:-18px;
top:-12px;
width:12px;
height:12px;
background-color:white;
border-radius:50%;
}
.right .basic-iris-pupil .light{
left:18px;
}

syaringan.css：

@keyframes ani-sya {
from{
opacity: 0;
}
to{
z-index:-10;
}
}
.sya-iris-pupil{
background-color: black;
border-radius:50%;
width:10px;
height:10px;
box-shadow:0 0 0 12px #f00,
0 0 1px 12px #000,
0 0 0 26px #f00,
0 0 2px 30px #bd0000,
0 0 0 32px #000;
transform:skewX(-15deg);
animation:ani-sya 1s ease 3s;
animation-fill-mode: both;
}

.sya-iris-pupil .yasakas{
width:10px;
height:10px;
animation:1s ease 4s;
animation-fill-mode:both;
}
.sya-iris-pupil .right-yasakas{
width:100%;
height:100%;
transform: rotateY(180deg);
}
@keyframes ani-sya-left-yasakas {
from{
opacity: 0;
}
to{
opactiy:1;
transform:rotate(-360deg);
}
}
@keyframes ani-sya-right-yasakas {
from{
opacity: 0;
}
to{
transform:rotate(360deg);
}
}
.left .sya-iris-pupil .yasakas{
animation-name: ani-sya-left-yasakas;
}
.right .sya-iris-pupil .yasakas{
animation-name: ani-sya-right-yasakas;
}

.sya-iris-pupil .yasaka{
width:8px;
height:8px;
background-color: black;
border-radius:50%;
}
.sya-iris-pupil .yasaka:after{
position: absolute;
left:-3px;
content:"";
width:8px;
height:8px;
border:solid black;
border-width: 0 0 4px;
border-radius:0 0 0 70%;
transform:rotate(-75deg);
}

.sya-iris-pupil .light{
position: absolute;
left:-13px;
top:-9px;
width:8px;
height:8px;
background-color:white;
border-radius:50%;
}
.right .sya-iris-pupil .light{
left:18px;
}

.sya-iris-pupil .yasaka.top{
top:-16px;
bottom: auto;
transform: rotate(180deg);
}

.sya-iris-pupil .yasaka.left{
left:-14px;
right:auto;
top:12px;
transform: rotate(45deg);
}

.sya-iris-pupil .yasaka.right{
right:-14px;
left:auto;
top:12px;
transform: rotate(-75deg);
}

magekyou.css：

.mag-iris-pupil{
background-color: white;
border-radius:50%;
width:10px;
height:10px;
box-shadow:
0 0 0 7px #000,
0 0 0 26px #f00,
0 0 2px 30px #bd0000,
0 0 0 32px #000;
transform:skewX(-15deg);
animation:ani-sya 1s ease 7s;
animation-fill-mode:both;
}
.mag-iris-pupil .light{
position: absolute;
left:-18px;
top:-9px;
width:8px;
height:8px;
background-color:white;
border-radius:50%;
}
.right .mag-iris-pupil .light{
left:18px;
bottom: 9px;
}
.mag-iris-pupil .yasakas{
width:10px;
height:10px;
animation:1s ease 7s;
animation-fill-mode:both;
}
.mag-iris-pupil .right-yasakas{
width:100%;
height:100%;
transform: rotateY(180deg);
}

.left .mag-iris-pupil .yasakas{
animation-name: ani-sya-left-yasakas;
}
.right .mag-iris-pupil .yasakas{
animation-name: ani-sya-right-yasakas;
}

@keyframes ani-mag-yasaka{
from{
width:10px;
height:10px;
}
}
.mag-iris-pupil .yasaka{
position: absolute;
width:20px;
height:20px;
border:solid black;
border-width: 0 0 20px;
border-radius:0 0 0 100%;
animation:ani-mag-yasaka 1s ease 7s;
animation-fill-mode:both;
}
.mag-iris-pupil .yasaka.top{
top:-34px;
left:-0px;
transform: rotate(70deg);
}
.mag-iris-pupil .yasaka.left{
top:-10px;
left:-24px;
transform:rotate(-45deg);
}
.mag-iris-pupil .yasaka.right{
right:-21px;
top:-5px;
transform: rotate(180deg);
}

trans-eyes.css：

@keyframes ani-trans{
from{
z-index:-10;
opacity: 0;
box-shadow:0 0 0 14px #464646,
0 0 0 16px #000;
}
99%{
z-index:-9;
}
}
.trans-iris-pupil{
width:10px;
height:10px;
background-color: black;
border-radius:50%;
box-shadow:0 0 0 14px #464646,
0 0 0 16px #000,
0 0 0 30px #6c6c6c,
0 0 0 32px #000,
0 0 0 44px #a6a6a6,
0 0 0 46px #000;
transform:skewX(-15deg);
animation:ani-trans 2s ease 8s;
animation-fill-mode: both;
}
.trans-iris-pupil .light{
position: absolute;
left:-18px;
top:-12px;
width:12px;
height:12px;
background-color:white;
border-radius:50%;
}
.right .trans-iris-pupil .light{
left:18px;
}

转载于:https://www.cnblogs.com/forri/p/5645870.html

weixin_33966095

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS实现火影忍者各种眼睛的实现和变换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>eyes</title> <link rel="stylesheet" href="basic-eye.css"> <link rel="styles...
复制链接

扫一扫