css布局一个圣诞节装饰房间效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局一个圣诞节装饰房间效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  width: 100%;
  height: 100vh;
  position: absolute;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  background-color: #bedcfa;
}

div {
  position: absolute;
  display: block;
}

.lights {
  width: 100%;
  height: 80px;
  position: fixed;
  background: radial-gradient(circle at 60px -5px, transparent 17%, #0F7833 17%, #0F7833 17.5%, transparent 17.5%), linear-gradient(to right, transparent 0, #0F7833 0, #0F7833 1%, transparent 1%), radial-gradient(circle at 50% 50%, white 10%, transparent 15%);
  background-size: 120px 400px, 120px 50px, 120px 105px;
  background-position: 0 -35px, 0 -35px, 60px -26px;
  background-repeat: repeat-x;
}

.window {
  overflow: hidden;
  width: 350px;
  height: 180px;
  top: 80px;
  left: 60px;
  border: solid 8px #E1E1E1;
  background: linear-gradient(transparent 49%, #E1E1E1 49%, #E1E1E1 51%, transparent 51%), linear-gradient(to right, transparent 49.5%, #E1E1E1 49.5%, #E1E1E1 50.5%, transparent 50.5%), linear-gradient(to top, #D5B534 20%, #064273 28%, #1da2d8 55%, #7fcdff 65%, #30D5C8 70%);
  box-shadow: 0 0 8px inset lightgrey, 0 0 5px;
}
.window .clouds {
  left: -300px;
  border-radius: 50%;
  width: 22px;
  height: 18px;
  box-shadow: 30px 13px 10px 2px white, 50px 13px 10px 2px white, 40px 8px 10px 2px white, 180px 8px 10px 2px white, 200px 8px 10px 2px white, 190px 3px 10px 2px white, 280px 15px 10px 2px white, 300px 15px 10px 2px white, 290px 10px 10px 2px white;
  animation: clouds 120s infinite;
}

@keyframes clouds {
  100% {
    transform: translateX(580px);
  }
}
@keyframes cat {
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
.tree {
  position: relative;
  width: 400px;
  height: 365px;
  z-index: -2;
  left: 550px;
  top: 22px;
  background: conic-gradient(at 50% 0%, #bedcfa 42%, transparent 42%, transparent 58%, #bedcfa 58%), radial-gradient(circle, #CE1713 5%, #BB2528 8%, transparent 8%), radial-gradient(circle, #D5B534 5%, #B1972B 8%, transparent 8%), radial-gradient(circle, #E1E1E1 5%, #E1E1E1 8%, transparent 8%), radial-gradient(circle at 110px -10px, transparent 50%, #E1E1E1 50%, white 51%, transparent 51%), radial-gradient(circle at 10px 10px, transparent 65%, #CE1713 65%, #CE1713 66%, transparent 66%), radial-gradient(circle at 148px 100px, transparent 65%, #D5B534 65%, #D5B534 66%, transparent 66%), conic-gradient(at 50% 0%, transparent 42%, #0F7833 42%, #0F7833 58%, transparent 58%);
  background-size: auto auto, 120px 120px, 120px 120px, 120px 120px, 220px 200px, 268px 285px, 270px 270px, auto auto;
  background-position: center, -34px 36px, 40px -50px, 50% 0, 105px 100px, 2px 94px, 125px 50px, center;
  background-repeat: no-repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}

.bark {
  width: 45px;
  height: 100px;
  background-color: #623304;
  left: 730px;
  z-index: -3;
}

.scene-container {
  margin: auto;
  display: block;
  width: 80%;
  height: 100%;
  position: relative;
}

.couch {
  width: 350px;
  height: 60px;
  background-color: #CE1713;
  box-shadow: 0 0 18px;
  position: absolute;
  left: 250px;
  top: 480px;
  border-top: 15px solid #FF7777;
}
.couch .couch-back {
  width: 440px;
  height: 160px;
  background-color: #BB2528;
  top: -145px;
  left: -45px;
  position: absolute;
  z-index: -1;
  border-radius: 15% 15% 0 0 / 35%;
}

.couchlegs, .couchlegs:after {
  width: 34px;
  height: 40px;
  position: relative;
  top: 540px;
  left: 230px;
  z-index: -1;
  background: linear-gradient(100deg, transparent 15%, #816D1F 15%, #816D1F 50%, transparent 50%), linear-gradient(120deg, transparent 36%, #816D1F 36%, #816D1F 65%, transparent 65%);
}

.couchlegs:after {
  content: '';
  display: inline.........完整代码请登录后点击上方下载按钮下载查看