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

网友评论0