纯css绘制mac电脑卡通形象-html代码-BFW代码库

纯css绘制mac电脑卡通形象

代码语言：html

代码描述：纯css绘制mac电脑卡通形象

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


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

<style>
/*
  MIXINS  
*/
/*
  COLORS
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fcc72e;
  display: flex;
  justify-content: center;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20vw;
  height: 100vh;
  min-height: 350px;
  position: relative;
}
.wrapper .rainbow {
  display: flex;
  width: 108px;
  height: 50vh;
  box-shadow: 18px 0 #6bc460 inset, 36px 0 #fcc72e inset, 54px 0 #fd9731 inset, 72px 0 #eb5350 inset, 90px 0 #ab55a6 inset, -18px 0 #0189b4 inset;
}
.wrapper .top-square,
.wrapper .btm-square {
  background: #d4d3c1;
  border: 5px solid #191918;
  border-radius: 8px;
  position: relative;
  display: flex;
  box-shadow: 5px 0 #e5e3d4 inset, -10px 0 #b0ae91 inset;
}
.wrapper .mac {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrapper .top-square {
  width: 127px;
  height: 150px;
  justify-content: center;
  margin-top: -50px;
  animation: top-wobble 2s infinite;
}
.wrapper .top-square .screen {
  border: 5px solid #191918;
  background: #00cde9;
  width: 100px;
  height: 85px;
  border-radius: 5px;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}
.wrapper .top-square .screen .shine {
  width: 4px;
  height: 80%;
  top: 3px;
  left: 3px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper .top-square .screen .shine::before, .wrapper .top-square .screen .shine::after {
  content: '';
  display: block;
  background: rgba(255, 255, 255, 0.7);
  width: 100%;
  border-radius: 2px;
}
.wrapper .top-square .screen .shine::before {
  height: 30%;
}
.wrapper .top-square .screen .shine::after {
  height: 60%;
}
.wrapper .top-square .screen .eyes {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 50%;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
}
.wrapper .top-square .screen .eyes::before, .wrapper .top-square .screen .eyes::after {
  content: '';
  display: block;
  background: #000;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.wrapper .top-square .screen .cheeks {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 70%;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}
.wrapper .top-square .screen .cheeks::before, .wrapper .top-square .screen .cheeks::after {
  content: '';
  display: block;
  background: #0189b4;
  wid.........完整代码请登录后点击上方下载按钮下载查看