效果图
会自动移动,当鼠标停在眼睛上时会停止
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瞅啥呢,说你呢</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#boss{
width: 200px;
height: 200px;
position: relative;
left: 150px;
top: 150px;
transform-style: preserve-3d;
perspective: 1000px;
}
/* 亮白眼球 */
#box{
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background:-webkit-radial-gradient(100px 100px ,circle,rgba(255,255,255,0.5),rgba(239,239,239,1));
}
#box:before{
content:"";
position: absolute;
width: 100%;
height: 90%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 0px ,circle ,#fff,rgba(255,255,255,0.6),rgba(255,255,255,0.8)58%);
}
/* 眼珠子 */
#boss #center{
position: absolute;
height: 66px;
width: 66px;
left: 50%;
margin-left: -25px;
top:50%;
margin-top:-15px;
border-radius: 50%;
background:-webkit-radial-gradient(35px 35px,circle,#000000,rgba(8,8,8,1)22%,rgba(1,217,251,1)26%);
animation: kiki 2s linear infinite;
}
/* 眼珠子的旁白 */
#center:before{
content: "";
position: absolute;
width: 28%;
height: 28%;
border-radius: 50%;
left: 16px;
top: 19px;
background: -webkit-radial-gradient(20px 20px,circle,rgba(255, 255, 255, 0.68),rgba(236, 236, 236, 0.24));
}
/* 底部阴影 */
#bot{
position: absolute;
height: 150px;
width: 150px;
border-radius: 50%;
background:-webkit-radial-gradient(50% 0px,circle,rgba(158,158,158,0.01),rgba(158,158,158,0.11));
left: 50%;
margin-left: -75px;
transform: rotateX(90deg) translateZ(-130px);
}
#boss #center:hover{
animation-play-state: paused;
}
/* 动起来,gogogo!! */
@-webkit-keyframes kiki{
0%{transform: translateX(20px) translateY(-40px);}
50%{transform:translateX(-30px) translateY(25px);}
75%{transform: translateX(-40px) translateY(10px);}
100%{transform: translateX(20px) translateY(-40px);}
}
p{
position: absolute;
left: 400px;
top: 400px;
}
</style>
</head>
<body>
<div id="boss">
<div id="box"></div>
<div id="center"></div>
<div id="bot"></div>
</div>
</body>
</html>
坚持每周更新,向全栈大佬进发
这是我的公众号,喜欢的朋友可以关注一下,每周更新,篇篇干货