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

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

代码语言：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;
  bo.........完整代码请登录后点击上方下载按钮下载查看