纯css绘制mac电脑卡通形象

代码语言:html

所属分类:布局界面

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

代码标签: 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, -10p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0