纯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, -10p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0