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:before, .ornaments .ornament-box:nth-child(1) > .ornament > .face > .smile:after {
  width: 10px;
  height: 10px;
  background-color: pink;
  opacity: .2;
  border-radius: 100%;
  top: 15px;
  animation: blush 3s infinite;
}
.ornaments .ornament-box:nth-child(1) > .ornament > .face > .smile:before {
  left: -30px;
}
.ornaments .ornament-box:nth-child(1) > .ornament > .face > .smile:after {
  left: 35px;
}
.ornaments .ornament-box:nth-child(1) > .string {
  animation: string-stretch 3s ease-in-out infinite;
}
.ornaments .ornament-box:nth-child(2) {
  animation: pendulum 3s ease-in-out infinite;
  left: 60%;
}
.ornaments .ornament-box:nth-child(2) > .ornament {
  z-index: 2;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #fe9e26;
  border: 1px solid #ffd500;
  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.2);
  background-image: radial-gradient(100% 115% at 25% 25%, #fff, transparent 33%), radial-gradient(15% 15% at 75% 75%, #ffea80, transparent), radial-gradient(100% 100% at 50% 25%, transparent, #ffe666 98%);
}
.ornaments .ornament-box:nth-child(2) > .ornament > .face > .eyes {
  left: -10px;
  animation: removeSmile 3s infinite, blink 2s 0.5s ease-in-out infinite;
}
.ornaments .ornament-box:nth-child(2) > .ornament > .face > .smile {
  left: 28px;
  animation: removeSmile 3s infinite;
}
.ornaments .ornament-box:nth-child(2) > .ornament > .face .blush {
  left: 38px;
  top: 40px;
  animation: blush 3s infinite;
}
.ornaments .ornament-box:nth-child(2) > .ornament > .face .blush:before, .ornaments .ornament-box:nth-child(2) > .ornament > .face .blush:after {
  width: 10px;
  height: 10px;
  background-color: #cd4626;
  border-radius: 100%;
  top: 15px;
}
.ornaments .ornament-box:nth-child(2) > .ornament > .face .blush:before {
  left: -30px;
}
.ornaments .ornament-box:nth-child(2) > .ornament > .face .blush:after {
  left: 35px;
}
.ornaments .string {
  position: relative;
  width: 5px;
  height: 50px;
  border: 2px solid #2a4930;
  border-radius: 200px;
  transform: perspective(10px) rotateX(5deg);
  left: 48px;
  transform-origin: top;
}
.ornaments .string:after {
  width: 12px;
  height: 12px;
  background-color: #ff8da1;
  top: 60%;
  left: -80%;
}
.ornaments .face {
  width: 100%;
  height: 70%;
}
.ornaments .face .eyes {
  display: flex;
  justify-content: space-between;
  top: 50%;
}
.ornaments .face .eyes:before, .ornaments .face .eyes:after {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #18281a;
  background-image: radial-gradient(ellipse 3px 3px at 50% 20%, #fff 99%, transparent), radial-gradient(ellipse 1px 1px at 20% 40%, #fff 99%, transparent);
  border-radius: 100%;
  margin: 0 15px;
}
.ornaments .face .smile {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 3px solid transparent;
  border-bottom: 4px solid #18281a;
  top: 55%;
}

.lovey-dovey-eyes {
  display: flex;
  justify-content: space-between;
  top: 30px;
  left: -10px;
  animation: kiss 3s infinite;
}
.lovey-dovey-eyes:before, .lovey-dovey-eyes:after {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 5px solid transparent;
  border-bottom: 5px solid #18281a;
  margin: 0 10px;
  top: -10px;
}

.shy-eyes {
  display: flex;
  justify-content: space-between;
  top: 30px;
  left: 3px;
  opacity: 0;
  animation: kiss 3s 0.5s infinite;
}
.shy-eyes:before, .shy-eyes:after {
  position: relative;
  width: 20.........完整代码请登录后点击上方下载按钮下载查看