纯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-gradient(#525B5A, #50585A);
  margin: auto;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  border-radius: 20px;
  box-shadow: 0 0 20px 10px #2B3030 inset;
}

.logo {
  display: block;
  width: 22px;
  height: 22px;
  background-image: radial-gradient(#C9C6B5, #CBC9BA);
  border-radius: 2px;
  position: absolute;
  left: 22px;
  bottom: 22px;
  padding-left: 3.5px;
  box-shadow: 0 0 2px 0px #979181 inset;
}

.logo p {
  text-align: center;
  margin-top: -2px;
}

.opening {
  display: block;
  width: 155px;
  height: 15px;
  background-image: linear-gradient(
    #BEBB9C, #CAC8A7 74.5% 75.5%);
  background-image: conic-gradient(
    #BEBB9C 0% 23.5%, #C7C2A2 24.5% 25%, #DCD8BD 26% 73.5%, #CAC8A7 74.5% 75.5%, #BEBB9C 76.5%);
  position: absolute;
  bottom: 55px;
  right: 21px;
  b.........完整代码请登录后点击上方下载按钮下载查看