css实现海绵宝宝眼睛跟随鼠标移动动画效果代码-html代码-BFW代码库

css实现海绵宝宝眼睛跟随鼠标移动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现海绵宝宝眼睛跟随鼠标移动动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
*{
            margin:0;
            padding:0;
            background-color:#f7e948;
            
            
        }
        body{
            width:100vw;
            height:100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .face{
            position:relative;
        }
        .eyes{
            position: relative;
            display:flex;
        }
        .eyes .eye{
            width:150px;
            height:150px;
            background-color:#fff;
            border-radius: 50%;
            border:1px solid #333;
            position:relative
        }
        .eyes .eye:before{
            content:'';
            position: absolute;
            width:50px;
            height:50px;
            background-color:#26b9cb;
            border-radius: 50%;
            border:1px solid #333;
            top:50%;
            left:30px;
            transform: translate(-50%, -50%)
        }
        .eyes .eye:after{
            content:'';
            position: absolute;
            width:30px;
            height:30px;
            background-color:#0457a0;
            border-radius: 50%;
            top:40%;
            left:10%
        }
        .eyelash1{
            width:5px;
            height:35px;
            background-color: #000;
            position: relative;
            top:-186px;
            left:70px;
            border-radius:20px 20px 50% 50%;
        }
        .eyelash1:before{
            content:'';
            position:absolute;
            width:5px;
            height:35px;
   .........完整代码请登录后点击上方下载按钮下载查看