css布局实现女生躺在床上看手机效果代码-html代码-BFW代码库

css布局实现女生躺在床上看手机效果代码

代码语言：html

代码描述：css布局实现女生躺在床上看手机效果代码

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

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

<head>
    <meta charset="UTF-8">
    <title> </title>

    <style>
        body {
      margin: 0;
    }
    
    .wrapper {
      display: flex;
      background: #3E0364;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      font-family: Helvetica, sans serif;
      color: #ffffff99;
    }
    .wrapper .title {
      position: absolute;
      top: 10px;
      left: 20px;
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .wrapper .title div {
      background: #ffffff99;
      width: 20px;
      height: 2px;
      margin: 10px 0;
    }
    .wrapper .credit {
      position: absolute;
      bottom: 10px;
      right: 20px;
      font-weight: 300;
    }
    
    .artboard {
      position: relative;
      margin: auto;
      width: 80vmin;
      height: 80vmin;
    }
    .artboard div {
      box-sizing: border-box;
      position: absolute;
      background: #999;
    }
    
    #bed {
      width: 32vmin;
      height: 60vmin;
      left: 24vmin;
      top: 5vmin;
      background: #4E057E;
    }
    
    #bed-end {
      width: 32vmin;
      height: 20vmin;
      left: 24vmin;
      bottom: 5vmin;
      background: #4E057E;
    }
    
    #pillow {
      width: 20vmin;
      height: 10vmin;
      left: 30vmin;
      top: 15vmin;
      background: #601E8B;
    }
    
    #quilt {
      width: 40vmin;
      height: 40vmin;
      left: 20vmin;
      top: 30vmin;
      background: #601E8B;
    }
    
    #body {
      width: 12vmin;
      height: 10vmin;
      left: 34vmin;
      top: 28vmin;
      background: #FFE0BD;
    }
    
    #arm-right {
      width: 12vmin;
      height: 14vmin;
      left: 34vmin;
      top: 29vmin;
      border-radius: 0 0 6vmin 6vmin;
      background: none;
      border-left: 2vmin solid #FFE0BD;
      border-right: 2vmin solid #FFE0BD;
      border-bottom: 2vmin solid #FFE0BD;
    }
    
    #hand {
      width: 3vmin;
      height: 3vmin;
      left: 43.5vmin;
      top: 32vmin;
      border-radius: 100%;
      background: #FFE0BD;
    }
    
    #arm-left {
      width: 14vmin;
      height: 12vmin;
      left: 40vmin;
      top: 18vmin;
      border-radius: 0 6vmin 6vmin 0;
      background: none;
      border-top: 2vmin solid #FFE0BD;
      border-right: 2vmin solid #FFE0BD;
      border-bottom: 2vmin solid #FFE0BD;
    }
    
    #neck {
      width: 3vmin;
      height: 5vmin;
      left: 38.5vmin;
      top: 24vmin;
      background: #FFE0BD;
    }
    
    #head {
      width: 10vmin;
      height: 11vmin;
      left: 35vmin;
      top: 16vmin;
      border-radius: 5vmin;
      background: #FFE0BD;
    }
    
    #hair {
      width: 10vmin;
      height: 13vmin;
      left: 35.5vmin;
      top: 15.5vmin;
      background: none;
      transform: rotate(-7deg);
    }
    #hair div {
      background: grey;
    }
    #hair div:first-child {
      width: 10vmin;
      height: 3vmin;
      border-radius: 5vmin 5vmin 0 0 /3vmin 3vmin 0 0;
    }
    #hair div:nth-child(2) {
      width: 5vmin;
      height: 2vmin;
      left: 5vmin;
      top: 2.5vmin;
      border-radius: 0 0 5vmin 5vmin /0 0 5vmin 5vmin;
    }
    #hair div:nth-child(3) {
      width: 6vmin;
      height: 3vmin;
      left: 0;
      top: 2.5vmin;
      border-radius:.........完整代码请登录后点击上方下载按钮下载查看