css布局实现一个挂在圣诞树上爱情表白挂饰效果代码-html代码-BFW代码库

代码语言：html

所属分类：表白

代码描述：css布局实现一个挂在圣诞树上爱情表白挂饰效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    html,
body {
  width: 100%;
  height: 100%;
  background-color: #ffd9df;
  overflow:hidden;
}

* {
  position: absolute;
}
*:before, *:after {
  content: "";
  position: absolute;
}

.container {
  width: 450px;
  height: 450px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: #fecb8c;
  border-radius: 100%;
  overflow: hidden;
}

.tree-layer {
  width: 300px;
  height: auto;
  transform: translateX(-50%);
  left: 50%;
  display: flex;
  top: -10%;
}
.tree-layer .leaf {
  position: relative;
  width: 60px;
  height: 200px;
  background-color: #58b1a1;
  border-radius: 200px;
  margin: auto -3%;
  left: 45px;
  top: 10px;
}
.tree-layer .leaf:nth-child(1) {
  transform: rotate(45deg) scale(1.1);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer .leaf:nth-child(2) {
  transform: rotate(22.5deg) scale(1.1);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer .leaf:nth-child(3) {
  transform: rotate(0deg) scale(1.1);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer .leaf:nth-child(4) {
  transform: rotate(-22.5deg) scale(1.1);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer .leaf:nth-child(5) {
  transform: rotate(-45deg) scale(1.1);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(1) {
  z-index: 3;
  animation: dipLayer 3s infinite;
}
.tree-layer:nth-child(1) > .leaf:nth-child(2) {
  animation: dipBranch 3s 1.5s infinite;
}
.tree-layer:nth-child(1) > .leaf:nth-child(4) {
  animation: dipBranch2 3s infinite;
}
.tree-layer:nth-child(2) {
  z-index: 3;
  animation: dipLayer 3s ease-in-out infinite;
}
.tree-layer:nth-child(2) > .leaf {
  background-color: #f1f1f1;
  margin: auto -5%;
  left: 70px;
  top: -50px;
}
.tree-layer:nth-child(2) > .leaf:nth-child(1) {
  transform: rotate(45deg) scale(0.8);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(2) > .leaf:nth-child(2) {
  transform: rotate(22.5deg) scale(0.8);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(2) > .leaf:nth-child(3) {
  transform: rotate(0deg) scale(0.8);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(2) > .leaf:nth-child(4) {
  transform: rotate(-22.5deg) scale(0.8);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(2) > .leaf:nth-child(5) {
  transform: rotate(-45deg) scale(0.8);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(3) {
  top: 12%;
  animation: dipLayer 3s ease-in-out infinite;
}
.tree-layer:nth-child(3) > .leaf {
  background-color: #4faa9a;
}
.tree-layer:nth-child(3) > .leaf:nth-child(1) {
  transform: rotate(45deg) scale(1.5);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(3) > .leaf:nth-child(2) {
  transform: rotate(22.5deg) scale(1.5);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(3) > .leaf:nth-child(3) {
  transform: rotate(0deg) scale(1.5);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(3) > .leaf:nth-child(4) {
  transform: rotate(-22.5deg) scale(1.5);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(3) > .leaf:nth-child(5) {
  transform: rotate(-45deg) scale(1.5);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(4) {
  animation: dipLayer 3s infinite;
}
.tree-layer:nth-child(4) > .leaf {
  background-color: #f1f1f1;
  margin: auto -5%;
  left: 70px;
  top: 55px;
}
.tree-layer:nth-child(4) > .leaf:nth-child(1) {
  transform: rotate(45deg) scale(1.2);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(4) > .leaf:nth-child(2) {
  transform: rotate(22.5deg) scale(1.2);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(4) > .leaf:nth-child(3) {
  transform: rotate(0deg) scale(1.2);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(4) > .leaf:nth-child(4) {
  transform: rotate(-22.5deg) scale(1.2);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(4) > .leaf:nth-child(5) {
  transform: rotate(-45deg) scale(1.2);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(5) {
  z-index: -1;
}
.tree-layer:nth-child(5) > .leaf {
  background-color: #f1f1f1;
  margin: auto -5%;
  left: 70px;
  top: 180px;
}
.tree-layer:nth-child(5) > .leaf:nth-child(1) {
  transform: rotate(45deg) scale(1.5);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(5) > .leaf:nth-child(2) {
  transform: rotate(22.5deg) scale(1.5);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(5) > .leaf:nth-child(3) {
  transform: rotate(0deg) scale(1.5);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(5) > .leaf:nth-child(4) {
  transform: rotate(-22.5deg) scale(1.5);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(5) > .leaf:nth-child(5) {
  transform: rotate(-45deg) scale(1.5);
  box-shadow: inset 0px -10px #d8d8d8;
}
.tree-layer:nth-child(6) {
  z-index: -2;
  top: 40%;
}
.tree-layer:nth-child(6) > .leaf {
  background-color: #4ca394;
}
.tree-layer:nth-child(6) > .leaf:nth-child(1) {
  transform: rotate(45deg) scale(1.8);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(6) > .leaf:nth-child(2) {
  transform: rotate(22.5deg) scale(1.8);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(6) > .leaf:nth-child(3) {
  transform: rotate(0deg) scale(1.8);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(6) > .leaf:nth-child(4) {
  transform: rotate(-22.5deg) scale(1.8);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}
.tree-layer:nth-child(6) > .leaf:nth-child(5) {
  transform: rotate(-45deg) scale(1.8);
  box-shadow: inset 0px -15px #449284, 0px 15px #3c8074;
}

.ornaments {
  width: 100%;
  height: 40%;
  top: 40%;
  z-index: 2;
}
.ornaments .ornament-box {
  transform-origin: top;
  top: -30px;
}
.ornaments .ornament-box:nth-child(1) {
  left: 18%;
}
.ornaments .ornament-box:nth-child(1) > .ornament {
  z-index: 2;
  position: relative;
  width: 100px;
  height: 100px;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  border: 1px solid #ff5500;
  background-color: #cd4626;
  background-image: radial-gradient(100% 100% at 25% 25%, #f1c0b4, transparent 33%), radial-gradient(15% 15% at 75% 75%, #ffaa80, transparent), radial-gradient(100% 100% at 50% 25%, transparent, #ff9966 98%);
  animation: fall 3s ease-in-out infinite;
}
.ornaments .ornament-box:nth-child(1) > .ornament > .face > .eyes {
  left: 8px;
  animation: removeSmile 3s 0.5s infinite, blink 3s ease-in-out infinite;
}
.ornaments .ornament-box:nth-child(1) > .ornament > .face > .smile {
  left: 45px;
}
.ornaments .ornament-box:nth-child(1) > .ornament > .face > .smile:bef.........完整代码请登录后点击上方下载按钮下载查看