纯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.........完整代码请登录后点击上方下载按钮下载查看