jquery+css实现可爱熊猫眼睛跟随鼠标移动的登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css实现可爱熊猫眼睛跟随鼠标移动的登录表单效果代码
代码标签: jquery css 可爱 熊猫 眼睛 跟随 鼠标 移动 登录 表单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Dancing+Script|Roboto);
*,*:after,*:before {
box-sizing:border-box
}
body {
background:#cc3367;
text-align:center;
font-family:'Roboto',sans-serif
}
.panda {
position:relative;
width:200px;
margin:50px auto
}
.face {
width:200px;
height:200px;
background:#fff;
border-radius:100%;
margin:50px auto;
box-shadow:0 10px 15px rgba(0,0,0,0.15);
z-index:50;
position:relative
}
.ear,.ear:after {
position:absolute;
width:80px;
height:80px;
background:#000;
z-index:5;
border:10px solid #fff;
left:-15px;
top:-15px;
border-radius:100%
}
.ear:after {
content:'';
left:125px
}
.eye-shade {
background:#000;
width:50px;
height:80px;
margin:10px;
position:absolute;
top:35px;
left:25px;
transform:rotate(220deg);
border-radius:25px/20px 30px 35px 40px
}
.eye-shade.rgt {
transform:rotate(140deg);
left:105px
}
.eye-white {
position:absolute;
width:30px;
height:30px;
border-radius:100%;
background:#fff;
z-index:500;
left:40px;
top:80px;
overflow:hidden
}
.eye-white.rgt {
right:40px;
left:auto
}
.eye-ball {
position:absolute;
width:0;
height:0;
left:20px;
top:2.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0