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

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

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