纯css实现单个div绘制一个机器人效果-html代码-BFW代码库

纯css实现单个div绘制一个机器人效果

代码语言：html

代码描述：纯css实现单个div绘制一个机器人效果

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

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

<style>
/* R2-D2 */
.r2d2 {
  height: 24em;
  width: 22em;
  position: relative;
}
.r2d2::after {
  background-color: #000;
  content: '';
  height: 1em;
  width: 1em;
  position: absolute;
  bottom: 1em;
  box-shadow: 9em -22em #000, 10em -22em #000, 11em -22em #000, 12em -22em #000, 7em -21em #000, 8em -21em #000, 9em -21em #abaaa6, 10em -21em #426899, 11em -21em #426899, 12em -21em #abaaa6, 13em -21em #000, 14em -21em #000, 6em -20em #000, 7em -20em #426899, 8em -20em #abaaa6, 9em -20em #426899, 10em -20em #fff, 11em -20em #000, 12em -20em #426899, 13em -20em #abaaa6, 14em -20em #426899, 15em -20em #000, 5em -19em #000, 6em -19em #426899, 7em -19em #abaaa6, 8em -19em #abaaa6, 9em -19em #426899, 10em -19em #000, 11em -19em #000, 12em -19em #426899, 13em -19em #abaaa6, 14em -19em #abaaa6, 15em -19em #426899, 16em -19em #000, 5em -18em #000, 6em -18em #abaaa6, 7em -18em #abaaa6, 8em -18em #abaaa6, 9em -18em #426899, 10em -18em #426899, 11em -18em #426899, 12em -18em #426899, 13em -18em #abaaa6, 14em -18em #abaaa6, 15em -18em #abaaa6, 16em -18em #000, 4em -17em #000, 5em -17em #abaaa6, 6em -17em #426899, 7em -17em #426899, 8em -17em #abaaa6, 9em -17em #abaaa6, 10em -17em #abaaa6, 11em -17em #abaaa6, 12em -17em #abaaa6, 13em -17em #abaaa6, 14em -17em #abaaa6, 15em -17em #abaaa6, 16em -17em #abaaa6, 17em -17em #000, 4em -16em #000, 5em -16em #abaaa6, 6em -16em #ab.........完整代码请登录后点击上方下载按钮下载查看