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;
  border-top: 104px solid #199EFC;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  height: 0;
  width: 24px;
}
.robothead .helmet:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  width: 280px;
  height: 200px;
  background: #C8CCD8;
  border-radius: 100%;
  -webkit-clip-path: inset(120px 44px 0 44px);
          clip-path: inset(120px 44px 0 44px);
}
.robothead .visor {
  position: absolute;
  left: 50%;
  top: 104px;
  transform: translate(-50%, 0);
  width: 192px;
  height: 28px;
  z-index: 50;
  background: linear-gradient(0deg, #C8CCD8, #ECEDF2);
  border-radius: 0 0 100% 100%;
  box-shadow: 0 5px 10px #ECEDF2;
}
.robothead .face {
  width: 280px;
  height: 200px;
  position: relative;
  top: -200px;
  z-index: 20;
  background: #FFF;
  border-radius: 100%;
  box-shadow: inset 0 0 50px 5px #C8CCD8;
  -webkit-clip-path: inset(120px 45px 0 45px);
          clip-path: inset(120px 45px 0 45px);
}
.robothead .face:before {
  display: block;
  content: '';
  position: absolute;
  bottom: 42px;
  left: 30%;
  width: 20px;
  height: 10px;
  background: #199EFC;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 5px #52BBFC;
}
.robothead .face:after {
  display: block;
  content: '';
  width: 20px;
  height: 10px;
  position: absolute;
  bottom: 42px;
  right: 30%;
  background: #199EFC;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 5px #52BBFC;
}
.robotbody .torso {
  width: 144px;
  height: 160px;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, 0);
  background: #FFF;
  border: 1px solid #ECEDF2;
  border-radius: 100% 100% 120px 120px;
  box-shadow: inset 0 10px 30px 5px #ECEDF2;
}
.robotbody .to.........完整代码请登录后点击上方下载按钮下载查看