css布局实现一个夜间工作台桌面效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现一个夜间工作台桌面效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap" rel="stylesheet">
  
  
  
<style>
*,
*:before,
*:after {
  box-sizing: border-box;
  content: "";
}
:root {
  --h: 260;
  --s: 50%;
  --base: hsl(var(--h), var(--s), 50%);
  --c1: hsl(var(--h), var(--s), 5%);
  --c2: hsl(var(--h), var(--s), 10%);
  --c3: hsl(var(--h), var(--s), 15%);
  --c4: hsl(var(--h), var(--s), 20%);
  --c5: hsl(var(--h), var(--s), 25%);
  --c6: hsl(var(--h), var(--s), 30%);
  --c7: hsl(var(--h), var(--s), 35%);
  --c8: hsl(var(--h), var(--s), 40%);
  --c9: hsl(var(--h), var(--s), 45%);
  --c10: hsl(var(--h), var(--s), 50%);
  --c11: hsl(var(--h), var(--s), 55%);
  --c12: hsl(var(--h), var(--s), 60%);
  --c13: hsl(var(--h), var(--s), 65%);
  --c14: hsl(var(--h), var(--s), 70%);
  --c15: hsl(var(--h), var(--s), 75%);
  --c16: hsl(var(--h), var(--s), 80%);
  --c17: hsl(var(--h), var(--s), 85%);
  --c18: hsl(var(--h), var(--s), 90%);
  --c19: hsl(var(--h), var(--s), 95%);
  --c20: hsl(var(--h), var(--s), 100%);
}
body {
  margin: 0;
}
.office {
  position: relative;
  z-index: 0;
  --col1: hsl(var(--h), var(--s), 80%);
  --col2: hsl(var(--h), var(--s), 65%);
  --col3: hsl(var(--h), var(--s), 55%);
  height: 80vmin;
  max-width: 100vmin;
  margin: 10vmin auto;
  overflow: hidden;
  background: hsl(var(--h), var(--s), 50%);
  background-image: linear-gradient(
      var(--c11) 0,
      var(--c11) 2%,
      var(--c3) 0,
      var(--c3) 4%,
      transparent 0,
      transparent 20%,
      var(--c11) 0,
      var(--c11) 22%,
      var(--c3) 0,
      var(--c3) 24%,
      transparent 0,
      transparent 40%,
      var(--c11) 0,
      var(--c11) 42%,
      var(--c3) 0,
      var(--c3) 44%,
      transparent 0
    ),
    linear-gradient(
      90deg,
      var(--c16),
      var(--c16) 3%,
      var(--c13) 0,
      var(--c13) 14%,
      var(--c8) 0,
      var(--c8) 20%,
      var(--c3) 0
    );
  background-size: 16vmin 100vmin, 20vmin 100vmin;
  background-repeat: no-repeat;
  background-position: top 15vmin right 0, top 0 right 0;
}
.office:before {
  content: "";
  width: 85vmin;
  height: 20vmin;
  top: -10vmin;
  left: -10vmin;
  border: 1px solid var(--c6);
  border-radius: 0 0 100% 0;
  border-top: 0;
  border-left: 0;
  transform: rotate(-10deg);
}
.office:after {
  content: "";
  width: 0.5vmin;
  height: 0.5vmin;
  background: var(--c20);
  border-radius: 50%;
  top: 15vmin;
  left: 2vmin;
  box-shadow: 0 0 0.6vmin 0.3vmin var(--c19), 0 0 1vmin 0.6vmin var(--c14),
    0 0 1.4vmin 1vmin var(--c15), 10vmin -2.25vmin 0 0 var(--c19),
    10vmin -2.25vmin 0.6vmin 0.1vmin var(--c19),
    10vmin -2.25vmin 1vmin 0.6vmin var(--c17),
    10vmin -2.25vmin 1.4vmin 1vmin var(--c15), 20vmin -4.5vmin 0 0 var(--c19),
    20vmin -4.5vmin 0.6vmin 0.1vmin var(--c19),
    20vmin -4.5vmin 1vmin 0.6vmin var(--c13),
    20vmin -4.5vmin 1.4vmin 1vmin var(--c15), 30vmin -7.5vmin 0 0 var(--c19),
    30vmin -7.5vmin 0.6vmin 0.1vmin var(--c19),
    30vmin -7.5vmin 1vmin 0.4vmin var(--c17),
    30vmin -7.5vmin 1.4vmin 0.4vmin var(--c15), 40vmin -11vmin 0 0 var(--c19),
    40vmin -11vmin 0.6vmin 0.1vmin var(--c19),
    40vmin -11vmin 1vmin 0.4vmin var(--c17),
    40vmin -11vmin 1.4vmin 0.4vmin var(--c15), 75vmin -12vmin 0 0 var(--c19),
    75vmin -12vmin 0.6vmin 0.1vmin var(--c19),
    75vmin -12vmin 1vmin 0.4vmin var(--c17),
    75vmin -12vmin 1.4vmin 0.4vmin var(--c15), 85vmin -7.75vmin 0 0 var(--c19),
    85vmin -7.75vmin 0.6vmin 0.1vmin var(--c19),
    85vmin -7.75vmin 1vmin 0.4vmin var(--c17),
    85vmin -7.75vmin 1.4vmin 0.4vmin var(--c15), 95vmin -4.25vmin 0 0 var(--c19),
    95vmin -4.25vmin 0.6vmin 0.1vmin var(--c19),
    95vmin -4.25vmin 1vmin 0.4vmin var(--c17),
    95vmin -4.25vmin 1.4vmin 0.4vmin var(--c15);
  z-index: 10;
}
.office div,
*:before,
*:after {
  position: absolute;
}
.shelf {
  background-color: var(--c12);
  width: 50vmin;
  height: 3vmin;
  top: 20vmin;
  left: 25vmin;
  box-shadow: 0.6vmin 0.6vmin 0 0.6vmin var(--c6);
}

.shelf:before {
  content: "";
  width: 55vmin;
  height: 20vmin;
  top: -30vmin;
  right: -40vmin;
  border: 1px solid var(--c3);
  border-radius: 0 0 0 100%;
  border-top: 0;
  border-right: 0;
  z-index: 1;
  transform: rotate(10deg);
}

.plant {
  bottom: 3vmin;
  left: 2vmin;
  height: 7vmin;
  width: 10vmin;
  background: var(--c7);
  color: var(--c6);
  background-image: linear-gradient(
      45deg,
      currentColor 10%,
      transparent 0,
      transparent 50%,
      currentColor 0%,
      currentColor 60%,
      transparent 0
    ),
    linear-gradient(
      -45deg,
      currentColor 10%,
      transparent 0,
      transparent 50%,
      currentColor 0%,
      currentColor 60%,
      transparent 0
    );
  background-size: 1vmin 1vmin;
  border-top: 3vmin solid var(--c6);
  border-radius: 3px 3px 1vmin 1vmin;
}
.plant:after {
  content: "";
  bottom: 6.5vmin;
  width: 4vmin;
  height: 10vmin;
  border-radius: 50% 50% 30% 30%;
  background: var(--c4);
  left: 3vmin;
  z-index: -1;
}
.plant:before {
  content: "";
  bottom: 11.5vmin;
  width: 3vmin;
  height: 7vmin;
  border-radius: 50% 50% 50% 60%;
  background: var(--c4);
  left: 0.75vmin;
  box-shadow: 5.25vmin 3vmin 0 -0.25vmin var(--c4);
}

.table {
  width: 80vmin;
  height: 16vmin;
  bottom: 0;
  background: hsl(var(--h), var(--s), 40%);
  border-top: 2vmin solid hsl(var(--h), var(--s), 70%);
  box-shadow: inset 10vmin 0 hsl(var(--h), var(--s), 10%, 0.6),
    inset 0 3vmin 0 var(--c10), inset 0 6vmin 0 var(--c6);
}

.chair {
  width: 32vmin;
  height: 32vmin;
  bottom: 0;
  right: 10vmin;
  background: var(--c3);
  border-radius: 10% 10% 0 0;
  box-shadow: -3vmin 0vmin 0 var(--c4), -5vmin 0vmin 0 var(--c5);
}
.chair:after {
  width: 20vmin;
  height: 8vmin;
  background: var(--c4);
  bottom: 0;
  right: 100%;
  border-radius: 20vmin 0 0 0;
  transform: skew(10deg);
}
.imac {
  --w: 30vmin;
  height: 32vmin;
  width: calc(1.77 * var(--w));
  background: var(--c3);
  bottom: 20vmin;
  left: 5vmin;
  box-shadow: inset 0 0 0 2vmin var(--c2);
  border-radius: 1vmin;
  border-bottom: 5vmin solid var(--c13);
}

.imac:before {
  width: 7vmin;
  bottom: -9vmin;
  height: 3.75vmin;
  background: var(--c12);
  left: 0;
  right: 0;
  margin: auto;
  border-top: 1vmin solid var(--c8);
}

.imac:after {
  width: 26vmin;
  height: 0.5vmin;
  background: var(--c15);
  bottom: -9vmin;
  left: 16vmin;
}

.mouse {
  background: var(--c17);
  width: 8vmin;
  height: 2vmin;
  box-shadow: inset -2vmin 0 var(--c18), inset 1vmin 0 var(--c16);
  top: -4vmin;
  left: 46vmin;
  border-radius: 1.5vmin 1.5vmin 0 0;
}

.apple {
  color: var(--c5);
  bottom: -3.5vmin;
  left: 0;
  right: 0;
  margin: auto;
  background: currentcolor;
  width: 2.08vmin;
  height: 1.98vmin;
  border-radius: 35% 35% 41% 41% / 42% 42% 75% 75%;
}

.apple:before {
  background: currentColor;
  width: 0.65vmin;
  height: 0.65vmin;
  margin: -0.65vmin 0 0 0.9vmin;
  border-radius: 100% 0;
  z-index: 5;
}

.apple:after {
  color: var(--c13);
  background: currentColor;
  width: 0.9vmin;
  height: 0.9vmin;
  margin: 0.28vmin 0 0 1.74vmin;
  border-radius: 50%;
  transform: rotate (-53deg);
  z-index: 4;
  box-shadow: -1.27vmin -1.095vmin 0, -1.18vmin -1.07vmin 0,
    -1.155vmin -1.025vmin 0, -1.055vmin -1.095vmin 0, -1.05vmin -1.095vmin 0,
    -1.29vmin 1.66vmin 0;
}

.lamp {
  left: 50vmin;
  top: 32vmin;
  width: 16vmin;
  height: 10vmin;
  background: var(--c5);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: inset -5vmin 0 0 -2vmin var(--c4), inset 1vmin 0 0 var(--c16),
    0 1vmin 0 var(--c19);
}

.lamp:before {
  width: 8vmin;
  height: 6vmin;
  background-color: inherit;
  background-image: linear-gradient(var(--c3) 50%, transparent 0%);
  background-position: top 3vmin right 0.........完整代码请登录后点击上方下载按钮下载查看