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

代码语言：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 #abaaa6, 7em -16em #abaaa6, 8em -16em #abaaa6, 9em -16em #426899, 10em -16em #abaaa6, 11em -16em #426899, 12em -16em #426899, 13em -16em #426899, 14em -16em #abaaa6, 15em -16em #426899, 16em -16em #abaaa6, 17em -16em #000, 4em -15em #000, 5em -15em #abaaa6, 6em -15em #426899, 7em -15em #426899, 8em -15em #abaaa6, 9em -15em #426899, 10em -15em #abaaa6, 11em -15em #426899, 12em -15em #be2e36, 13em -15em #426899, 14em -15em #abaaa6, 15em -15em #426899, 16em -15em #abaaa6, 17em -15em #000, 4em -14em #000, 5em -14em #000, 6em -14em #000, 7em -14em #000, 8em -14em #000, 9em -14em #000, 10em -14em #000, 11em -14em #000, 12em -14em #000, 13em -14em #000, 14em -14em #000, 15em -14em #000, 16em -14em #000, 17em -14em #000, 2em -13em #000, 3em -13em #000, 4em -13em #000, 5em -13em #fff, 6em -13em #fff, 7em -13em #fff, 8em -13em #fff, 9em -13em #fff, 10em -13em #fff, 11em -13em #fff, 12em -13em #fff, 13em -13em #fff, 14em -13em #fff, 15em -13em #fff, 16em -13em #fff, 17em -13em #000, 18em -13em #000, 19em -13em #000, 1em -12em #000, 2em -12em #fff, 3em -12em #fff, 4em -12em #000, 5em -12em #abaaa6, 6em -12em #abaaa6, 7em -12em #abaaa6, 8em -12em #fff, 9em -12em #426899, 10em -12em #426899, 11em -12em #426899, 12em -12em #426899, 13em -12em #fff, 14em -12em #abaaa6, 15em -12em #abaaa6, 16em -12em #abaaa6, 17em -12em #000, 18em -12em #fff, 19em -12em #fff, 20em -12em #000, 1em -11em #000, 2em -11em #fff, 3em -11em #fff, 4em -11em #000, 5em -11em #abaaa6, 6em -11em #fff, 7em -11em #abaaa6, 8em -11em #fff, 9em -11em #fff, 10em -11em #fff, 11em -11em #fff, 12em -11em #fff, 13em -11em #fff, 14em -11em #abaaa6, 15em -11em #fff, 16em -11em #abaaa6, 17em -11em #000, 18em -11em #fff, 19em -11em #fff, 20em -11em #000, 1em -10em #000, 2em -10em #000, 3em -10em #000, 4em -10em #000, 5em -10em #abaaa6, 6em -10em #fff, 7em -10em #abaaa6, 8em -10em #fff, 9em -10em #426899, 10em -10em #426899, 11em -10em #426899, 12em -10em #426899, 13em -10em #fff, 14em -10em #abaaa6, 15em -10em #fff, 16em -10em #abaaa6, 17em -10em #000, 18em -10em #000, 19em -10em #000, 20em -10em #000, 2em -9em #000, 3em -9em #fff, 4em -9em #000, 5em -9em #abaaa6, 6em -9em #fff, 7em -9em #abaaa6, 8em -9em #fff, 9em -9em #fff, 10em -9em #fff, 11em -9em #fff, 12em -9em #fff, 13em -9em #fff, 14em -9em #abaaa6, 15em -9em #fff, 16em -9em #abaaa6, 17em -9em #000, 18em -9em #fff, 19em -9em #000, 2em -8em #000, 3em -8em #fff, 4em -8em #000, 5em -8em #abaaa6, 6em -8em #fff, 7em -8em #abaaa6, 8em -8em #fff, 9em -8em #426899, 10em -8em #abaaa6, 11em -8em #abaaa6, 12em -8em #426899, 13em -8em #fff, 14em -8em #abaaa6, 15em -8em #fff, 16em -8em #abaaa6, 17em -8em #000, 18em -8em #fff, 19em -8em #000, 2em -7em #000, 3em -7em #fff, 4em -7em #000, 5em -7em #abaaa6, 6em -7em #fff, 7em -7em #abaaa6, 8em -7em #fff, 9em -7em #426899, 10em -7em #abaaa6, 11em -7em #abaaa6, 12em -7em #426899, 13em -7em #fff, 14em -7em #abaaa6, 15em -7em #fff, 16em -7em #abaaa6, 17em -7em #000, 18em -7em #fff, 19em -7em #000, 2em -6em #000, 3em -6em #fff, 4em -6em #000, 5em -6em #abaaa6, 6em -6em #fff, 7em -6.........完整代码请登录后点击上方下载按钮下载查看