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;
.........完整代码请登录后点击上方下载按钮下载查看