css布局实现猫头鹰眼睛跟随鼠标动画效果代码-html代码-BFW代码库

css布局实现猫头鹰眼睛跟随鼠标动画效果代码

代码语言：html

代码描述：css布局实现猫头鹰眼睛跟随鼠标动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body{
  background-color:#777ebf;
  margin-left:45vw;
  margin-top:10vh;
}
h4{
  font-size:24px;
  color:#F6B43C;
  margin-left:-220px;
  font-family: Tahoma, sans-serif;
  padding-bottom:20px;
}
.half-face{
  position:relative;
  width:80px;
  height:100px;
  background-color:#7F674F;
  border-radius:100%;
}
.owl{
  position:relative;
}
.flex{
  display:flex;
}
.eyes{
  width:50px;
  height:70px;
   background-color:#E0C6AE;
  border-radius:100%;
  margin-left:14px;
  margin-top:12px;

}
@keyframes eyes{
  100%{
    left:23px;
  }
}
.eyeball{
  
  width:30px;
  height:30px;
  background-color:white;
  border-radius:100%;
  position:absolute;
  left:25px;
  top:29px;
}
.eyeballblack{
  animation-direction:alternate;
    width:20px;
  height:20px;
  background-color:black;
  border-radius:100%;
  position:absolute;
  left:35px;
  top:33px;
}
.body{
  width:140px;
  height:200px; 
  margin-left:10px;
  margin-top:-40px;
  background-color:#E0C6AE;
  border-radius:100%;
}
.face{
  background-color:#62513F;
  width:140px;
  height:130px;
  border-radius:100%;
  position:absolute;
  top:-12px;
  left:10px;
  z-index:-1;
}
.wing{
  background-color:#62513F;
  width:140px;
  height:170px;
  border-radius:100%;
  position:absolute;
  left:-3px;
  z-index:-1;
  top:70px;
  animation:wing 1s infinite;
animation-direction: alternate;
}
@keyframes wing{
  100%{
    left:-10px;
  }
}
@keyframes wing2{
  100%{
    left:30px;
  }
}
.wing.two{
  animation:wing2 1s infinite;
animation-direction: alternate;
  left:20px;
  top:70px;
}
.beak{
  clip-path: polygon(50% 0%, 0 92%, 100% 92%);
  width:40px;
  height:50px;
  background-color:#F6B43C;
  positio.........完整代码请登录后点击上方下载按钮下载查看