css布局娃娃形可爱机器人效果代码-html代码-BFW代码库

css布局娃娃形可爱机器人效果代码

代码语言：html

代码描述：css布局娃娃形可爱机器人效果代码

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

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

<style>
    body {
  background: #e3f3ff;
}
.container {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.robothead {
  position: relative;
}
.robothead .ears {
  width: 320px;
  height: 48px;
  position: absolute;
  left: 50%;
  top: 80px;
  transform: translate(-50%, 0);
  background: #FFF;
  border-radius: 24px;
  border: 1px solid #ECEDF2;
  box-shadow: 0 0 15px #ECEDF2, inset 0 0 5px #C8CCD8;
  z-index: 0;
}
.robothead .helmet {
  width: 280px;
  height: 200px;
  position: relative;
  background: #FFF;
  border-radius: 100%;
  box-shadow: 0 0 15px #C8CCD8, inset 0 0 50px 20px #ECEDF2;
  z-index: 10;
}
.robothead .helmet:before {
  display: block;
  content: '';
  position: absolute;
  left: 104px.........完整代码请登录后点击上方下载按钮下载查看