console
<div class="eye">
<!-- 左眼 -->
<div class="left-eye">
<!-- 眼球 -->
<div class="eye-ball">
<!-- 内敛线 -->
<div class="eye-line v-h-center"></div>
<!-- 勾玉 -->
<div class="jade v-h-center">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!-- 右眼 -->
<div class="right-eye">
<!-- 眼球 -->
<div class="eye-ball"></div>
<!-- 轮回圈 -->
<div class="circle">
<div class="v-h-center"></div>
<div class="v-h-center"></div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
animation: white1 steps(1) 1s 1s forwards;
}
/* 背景变化 */
@keyframes white1 {
0%,
100% {
background: #000;
}
50% {
/* background: #fff; */
/* background: #f86d03; */
/* background: red; */
}
}
.v-h-center {
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.eye {
width: 60vw;
min-width: 600px;
height: 70vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.left-eye,
.right-eye {
width: 200px;
height: 90px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
transition: .3s;
border: 8px solid transparent;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}
.left-eye {
animation: L-fuzzy steps(1) 1s 1s forwards;
}
.right-eye {
animation: R-fuzzy steps(1) 1s 1s forwards;
}
/* 左右眼开启前动画 */
@keyframes L-fuzzy {
0% {
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}
50% {
box-shadow: -8px -8px 0 rgba(255, 255, 255, 0.377), 8px 8px 0 rgba(255, 255, 255, 0.377);
}
100% {
border: 8px solid #000;
box-shadow: -8px -8px 0 #f86d03, 8px 8px 0 #f86d03;
}
}
@keyframes R-fuzzy {
0% {
border-color: transparent;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}
50% {
box-shadow: -8px 8px 0 rgba(255, 255, 255, 0.377), 8px -8px 0 rgba(255, 255, 255, 0.377);
}
100% {
border: 8px solid #000;
box-shadow: -8px 8px 0 #f86d03, 8px -8px 0 #f86d03;
}
}
/* 左右眼眼球 */
.left-eye .eye-ball,
.right-eye .eye-ball {
width: 70px;
height: 70px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.5);
position: relative;
transition: inherit;
}
/* 眼白 */
.left-eye .eye-ball::before,
.right-eye .eye-ball::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 16px;
top: 16px;
transition: inherit;
z-index: 1;
}
/* 瞳孔 */
.left-eye .eye-ball::after,
.right-eye .eye-ball::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 1);
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(0);
animation: left-eye-ball-after 1s linear 4s forwards;
}
/* 瞳孔动画 */
@keyframes left-eye-ball-after {
0% {
transform: scale(0);
}
100% {
transform: scale(1.2);
}
}
.left-eye {
border-radius: 2px 90px;
}
.left-eye .eye-ball {
background: #000;
position: relative;
animation: eye-ball-animation linear 1s 4s forwards;
}
/* 左眼眼球渐变动画 */
@keyframes eye-ball-animation {
0% {
background: #000;
}
100% {
background: red;
}
}
/* 左眼眼球线 */
.left-eye .eye-ball .eye-line {
width: 43px;
height: 43px;
border-radius: 50%;
}
/* 左眼勾玉包裹容器 */
.left-eye .eye-ball .jade {
width: 43px;
height: 43px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.5);
transform: scale(0) rotate(0deg);
animation: eye-ball-jade-animation 1s linear 4s forwards;
}
/* 左眼勾玉渐变动画 */
@keyframes eye-ball-jade-animation {
0% {
transform: scale(0) rotate(0deg);
}
100% {
transform: scale(1) rotate(1turn);
}
}
/* 左眼勾玉 */
.left-eye .eye-ball .jade div {
width: 8px;
height: 8px;
position: absolute;
top: -4px;
left: calc(50% - 4px);
transform-origin: center 25.5px;
border-radius: 50%;
background: #000;
}
/* 勾玉尖角 */
.left-eye .eye-ball .jade div::before {
content: '';
position: absolute;
top: -3px;
left: 0px;
width: 19px;
height: 14px;
border-radius: 50%;
box-shadow: 5px -1px 0 inset rgb(0, 0, 0);
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 0, 0 0);
clip-path: polygon(0 50%, 100% 50%, 100% 0, 0 0);
}
/* 顶部勾玉 */
.left-eye .eye-ball .jade div:nth-child(1) {
transform: rotate(10deg);
}
/* 左下角勾玉 */
.left-eye .eye-ball .jade div:nth-child(2) {
transform: rotate(130deg);
}
/* 右下角勾玉 */
.left-eye .eye-ball .jade div:nth-child(3) {
transform: rotate(250deg);
}
.right-eye {
border-radius: 90px 2px;
overflow: hidden;
position: relative;
}
.right-eye .eye-ball {
z-index: 1;
background: #000;
animation: R-eye-ball-animation linear 1s 4s forwards;
}
/* 左眼眼球渐变动画 */
@keyframes R-eye-ball-animation {
0% {
background: #000;
}
100% {
background: #9082b7;
}
}
.right-eye .circle {
width: 70px;
height: 70px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.5);
background: #d2cce4;
transition: inherit;
position: absolute;
transform: scale(1);
animation: R-eye-circle 1s linear 4s forwards;
}
@keyframes R-eye-circle {
0% {
transform: scale(1);
}
100% {
transform: scale(3.1);
}
}
.right-eye .circle div:nth-child(1) {
width: 70%;
height: 70%;
border-radius: 50%;
background: #bbb1d5;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.right-eye .circle div:nth-child(2) {
width: 50%;
height: 50%;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.5);
background: #bbb1d5;
}
/* #d2cce4 */
/* #bbb1d5 */
/* 手机端适配 */
@media screen and (max-width: 600px) {
.eye {
width: 90vw;
min-width: 0;
}
.left-eye,
.right-eye {
width: 100px;
height: 40px;
position: relative;
overflow: hidden;
}
.left-eye .eye-ball,
.right-eye .eye-ball {
width: 30px;
height: 30px;
}
/* 眼白 */
.left-eye .eye-ball::before,
.right-eye .eye-ball::before {
width: 4px;
height: 4px;
left: 5px;
top: 5px;
}
/* 瞳孔 */
.left-eye .eye-ball::after,
.right-eye .eye-ball::after {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
}
/* 左眼眼球线 */
.left-eye .eye-ball .eye-line {
width: 21px;
height: 21px;
border-radius: 50%;
}
/* 左眼勾玉包裹容器 */
.left-eye .eye-ball .jade {
width: 21px;
height: 21px;
}
/* 左眼勾玉 */
.left-eye .eye-ball .jade div {
width: 4px;
height: 4px;
top: -3px;
left: calc(50% - 2px);
transform-origin: center 13.5px;
}
/* 勾玉尖角 */
.left-eye .eye-ball .jade div::before {
top: -2px;
width: 5px;
height: 10px;
box-shadow: 1px 0px 0 inset rgb(0, 0, 0);
}
.right-eye .circle {
width: 30px;
height: 30px;
border: 0.5px solid rgba(0, 0, 0, 0.5);
transform: scale(1);
animation: R-eye-circle 1s linear 4s forwards;
}
@keyframes R-eye-circle {
0% {
transform: scale(1);
}
100% {
transform: scale(3.4);
}
}
}