单个div+css实现一个山间小屋布局效果代码-html代码-BFW代码库

代码语言：html

代码描述：单个div+css实现一个山间小屋布局效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow: hidden;
}

:root {
  --dark-brown: rgb(103, 76, 54);
  --log-light: rgb(251, 207, 107);
  --log-dark: rgb(231, 175, 86);
  --door-light: #b5a68b;
  --door-dark: #b5a68b;
  --door-frame: rgb(103, 76, 54);
}


body {
  --sky: #CCF2FF;
  --grass-dark: linear-gradient(rgb(107, 128, 48) 0%, rgb(107, 128, 48) 100%) 0vmin 90vh / 100% 20vmin no-repeat;
  --grass-light: linear-gradient(rgb(126, 155, 51) 0%, rgb(126, 155, 51) 100%) 0vmin 90vh / 100% 5vmin no-repeat;
  --cloud-one-1: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 20vmin 20vmin / 10vmin 10vmin no-repeat;
  --cloud-one-2: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 23vmin 20vmin / 10vmin 10vmin no-repeat;
  --cloud-one-3: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 26vmin 20vmin / 10vmin 10vmin no-repeat;
  --cloud-one-4: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 21.5vmin 18vmin / 10vmin 10vmin no-repeat;
  --cloud-one-5: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 24.5vmin 18vmin / 10vmin 10vmin no-repeat;
  
  --cloud-two-1: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 30vmin 30vmin / 10vmin 10vmin no-repeat;
  --cloud-two-2: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 33vmin 30vmin / 10vmin 10vmin no-repeat;
  --cloud-two-3: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 36vmin 30vmin / 10vmin 10vmin no-repeat;
  --cloud-two-4: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 31.5vmin 28vmin / 10vmin 10vmin no-repeat;
  --cloud-two-5: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 34.5vmin 28vmin / 10vmin 10vmin no-repeat;
  
  --trunk-big-1: linear-gradient(-80deg, #855726 5%, transparent 5.5%) 7vmin 75vmin / 80vmin 15vmin no-repeat;
  --trunk-big-2: linear-gradient(80deg, #855726 5%, transparent 5.5%) 87vmin 75vmin / 80vmin 15vmin no-repeat;
  
  --tree-big-top-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) 27vmin 51vmin / 60vmin 18vmin no-repeat;
  --tree-big-top-2: linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 51vmin / 60vmin 18vmin no-repeat;
  
  --tree-big-middle-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) 7vmin 68vmin / 80vmin 8vmin no-repeat;
  --tree-big-middle-2: linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 68vmin / 80vmin 8vmin no-repeat;
  
  --tree-big-bottom-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) -13vmin 75vmin / 100vmin 10vmin no-repeat;
  --tree-big-bottom-2:linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 75vmin / 100vmin 10vmin no-repeat;
  
  
  --mountain-one-1: linear-gradient(-35deg, #ccc 12%, transparent 12.5%) 0vmin 12vh / 250vmin 78vmin no-repeat;
  --mountain-one-2: linear-gradient(35deg, #ccc 12%, transparent 12.5%) 250vmin 12vh / 250vmin 78vmin no-repeat;

  --mountain-two-1: linear-gradient(-35deg, #cac7c7 12%, transparent 12.5%) -200vmin 12vh / 250vmin 78vmin no-repeat;
  --mountain-two-2: linear-gradient(35deg, #cac7c7 12%, transparent 12.5%) 50vmin 12vh / 250vmin 78vmin no-repeat;

  --mountain-three-1: linear-gradient(-35deg, #eee 12%, transparent 12.5%) -400vmin 12vh / 570vmin 78vmin no-repeat;
  --mountain-three-2: linear-gradient(35deg, #eee 12%, transparent 12.5%) 170vmin 12vh / 570vmin 78vmin no-repeat;
  
  
  min-height: 100vh;
  background:
    var(--cloud-one-5),
    var(--cloud-one-4),
    var(--cloud-one-3),
    var(--cloud-one-2),
    var(--cloud-one-1),
    
    var(--cloud-two-5),
    var(--cloud-two-4),
    var(--cloud-two-3),
    var(--cloud-two-2),
    var(--cloud-two-1),
    
    var(--tree-big-top-1),
    var(--tree-big-top-2),
    var(--tree-big-middle-1),
    var(--tree-big-middle-2),
    var(--tree-big-bottom-1),
    var(--tree-big-bottom-2),
    var(--trunk-big-2),
    var(--trunk-big-1),
    
    var(--mountain-one-1),
    var(--mountain-one-2),
    var(--mountain-two-1),
    var(--mountain-two-2),
    var(--mountain-three-1),
    var(--mountain-three-2),
    
    var(--grass-light), 
    var(--grass-dark),
    var(--sky);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding-bottom: 10vmin;
}

div {
  --base: linear-gradient(rgb(123, 106, 100) 0%, rgb(123, 106, 100) 100%) 0vmin 39vmin / 100% 1vmin no-repeat;
  --terrace-1: linear-gradient(rgb(188, 152, 115) 0%, rgb(188, 152, 115) 100%) 23vmin 39vmin / 14vmin 1vmin no-repeat;
  --terrace-2: linear-gradient(rgb(232, 216, 193) 0%, rgb(232, 216, 193) 100%) 22.5vmin 38vmin / 15vmin 1vmin no-repeat;

  --logs: linear-gradient(180deg, rgb(251, 207, 107) 25%, rgb(231, 175, 86) 25%, rgb(231, 175, 86) 50%, rgb(251, 207, 107) 50%, rgb(251, 207, 107) 75%, rgb(231, 175, 86) 75%, rgb(231, 175, 86) 100%) 0vmin 25vmin / 4vmin 4vmin;
  --roof-beam: linear-gradient(rgb(171, 130, 78) 0%, rgb(171, 130, 78) 100%) 0vmin 16vmin / 100% 1vmin no-repeat;
  --roof-base: linear-gradient(rgb(123, 106, 101) 0%, rgb(123, 106, 101) 100%) 0vmin 0vmin / 100% 16vmin no-repeat;

  --roof-boarding-1: linear-gradient(#4F41.........完整代码请登录后点击上方下载按钮下载查看