纯css布局实现最古老的苹果电脑麦金塔-html代码-BFW代码库

纯css布局实现最古老的苹果电脑麦金塔

代码语言：html

代码描述：纯css布局实现最古老的苹果电脑麦金塔

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


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

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

body {
  background-color: #EDEEF0;
}

.macintosh {
  display: block;
  width: 340px;
  height: 475px;
  margin: 125px auto;
  position: relative;
  box-shadow: 0 80px 60px -60px rgba(0,0,0,0.4);
}

.monitor {
  z-index: 2;
  display: block;
  width: 100%;
  height: 410px;
  border-radius: 15px;
  background-color: #DDDBC2;
  position: absolute;
  background-image: lineear-gradient(
    #DDDBC2, #DFDAC4
  );
  background-image: conic-gradient(
    #DDDBC2 0 10.5%, #ECECD5 11% 11.5%, #CECDAF 12% 38%, #C8C4A7 39% 61.5%, #C7C3A6 62% 88%, #DFDAC4 88.5% 89%, #DDDBC2 89.25%
  ); /* Not supported everywhere :( */
  box-shadow: 0 60px 20px -20px rgba(142,137,97,0.5);
}

.monitor-inner {
  display: block;
  width: 320px;
  height: 360px;
  background-image: linear-gradient(#CAC6A9, #CFCEB0);
  margin: auto;
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  border-radius: 5px;
}

.screen-cutout {
  display: block;
  width: 280px;
  height: 225px;
  background-color: #DDDBC2;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  border-radius: 5px;
  background-image: linear-gradient(
    #938F6A, #E0DFC3
  ); 
  background-image: conic-gradient(
    #938F6A 12.5%, #B5B293 15.5% 33%, #E0DFC3 34% 65.5%, #C2C1A2 66.5% 83.5%, #938F6A 86.5%
  ); 
}

.screen {
  display: block;
  width: 260px;
  height: 195px;
  background-color: #4F5555;
  background-image: radial-gra.........完整代码请登录后点击上方下载按钮下载查看