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;
            background-color: #000;
            top:16px;
            left:-50px;
            transform: rotate(-35deg);
            border-radius:20px 20px 50% 50%;
        }
        .eyelash1:after{
            content:'';
            position:absolute;
            width:5px;
            height:35px;
            background-color: #000;
            top:13px;
            left:50px;
            transform: rotate(35deg);
            border-radius:20px 20px 50% 50%;
        }
        .eyelash2{
            width:5px;
            height:35px;
            background-color: #000;
            position: relative;
            top:-222px;
            left:220px;
            border-radius:20px 20px 50% 50%;
        }
        .eyelash2:before{
            content:'';
            position:absolute;
            width:5px;
            height:35px;
            background-color: #000;
            top:18px;
            left:-50px;
            transform: rotate(-35deg);
            border-radius:20px 20px 50% 50%;
        }
        .eyelash2:after{
            content:'';
            position:absolute;
            width:5px;
            height:35px;
            background-color: #000;
            top:13px;
            left:50px;
            transform: rotate(35deg);
            border-radius:20px 20px 50% 50%;
        }
        .nose{
            width:50px;
            height:80px;
            border:1px solid #555;
            background-color: #f7e948;
            border-radius: 50%;
            position: relative;
            top:-150px;
            left:120px;
        }
        .nose:before{
            content:'';
            position: absolute;
            width:30px;
            height:30px;

            background-color: #f7e948;
            border-radius:40%;
            top:65px;
            left:7px;
        }
        .nose:after{
            content:'';
            position: absolute;
            width:13px;
            height:13px;
            background-color: #aead0d;
            border-radius:40%;
            top:-60px;
            left:-160px;
        }
        .burger1{
            position: relative;
            background-color: #ed7f8c;
            width:15px;
            height:15px;
            border-radius: 50%;
            top:-100px;
            left:20px;
        }
        .burger1:before{
            content:'';
            position: absolute;
            background-color: #ed7f8c;
            width:15px;
            height:15px;
            border-radius: 50%;
            top:-30px;
            left:-30px;
        }
        .burger1:after{
            content:'';
            position: absolute;
            background-color: #ed7f8c;
            width:15px;
            height:15px;
            border-radius: 50%;
            top:-20px;
            left:30px;
        }
        .burger2{
            position: relative;
            background-color: #ed7f8c;
            width:15px;
            height:15px;
            border-radius: 50%;
            top:-100px;
            left:270px;
        }
        .burger2:before{
            content:'';
            position: absolute;
            background-color: #ed7f8c;
            width:15px;
            height:15px;
            border-radius: 50%;
            top:-20px;
            left:-30px;
        }
        .burger2:after{
            content:'';
            position: absolute;
            background-color: #ed7f8c;
            width:15px;
            height:15p.........完整代码请登录后点击上方下载按钮下载查看