纯css实现一个机器人EVE效果-html代码-BFW代码库

纯css实现一个机器人EVE效果

代码语言：html

代码描述：纯css实现一个机器人EVE效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root{
  --background:#1c2541;
  --face-color:#fff;
}
body{
  background:var(--background);
  margin:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  
}

.eve{
  position:relative;
  display:flex;
  justify-content:center; 
  width:250px;
  height:400px;
  border:1px solid transparent; 
  animation: motion 2s infinite;
  
  
}
.eve-face{
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  width:90px;
  height:70px;
  top:60px;
  background:var(--face-color);
  border-radius:100px 100px 45px 45px; 
  box-shadow:10px 5px 6px grey inset;
}
.eve-skin{
  postion:absolute;
  width:80px;
  height:55px;
  background:#000;
  border-radius:100px 100px 70px 70px;
  
}
.left-eye{
  position:absolute;
  top:30px;
  left:20px;
  width:20px;
  height:12px;
  background:#067FE2;
/*   border-radius:100px 100px 50px 50px; */
  clip-path: ellipse(50% 45% at 50% 50%);
  animation:eyeblink 2s infinite;
  
  
}
.right-eye{
  position:absolute;
  top:30px;
  right:20px;
  width:20px;
  height:12px;
  background:#067FE2;
/*   border-radius:100px 100px 50px 50px; */
  clip-path: ellipse(50% 45% at 50% 50%);
  animation:eyeblink 2s infinite;
}
.left-eye .pupil{
  position:absolute;
  top:4px;
  left:5px;
  width:10px;
  height:4px;
  background:#fff;
  opacity:0.6;
  border-radius:50%;
}

.right-eye .pupil{
  position:absolute;
  top:4px;
  right:5px;
  width:10px;
  height:4px;
  background:#fff;
  opacity:0.6;
  border-radius:50%;
}

.........完整代码请登录后点击上方下载按钮下载查看