div+css实现爱心连线效果代码-html代码-BFW代码库

div+css实现爱心连线效果代码

代码语言：html

所属分类：表白

代码描述：div+css实现爱心连线效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap");
html {
  font-family: "Noto Emoji", "system-ui";
  background-color: #fff800;
  overflow: hidden;
}

ul {
  transform: rotate(5deg);
}

.heart {
  display: block;
  width: 12rem;
  height: 9rem;
  font-size: 8rem;
  transform-origin: center;
  position: absolute;
  left: calc(50vw - 50rem);
  top: calc(50vh - 120px);
}
.heart:nth-child(1) {
  z-index: 59;
  color: #05025e;
  transform: translateX(25px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(74deg) rotateZ(3deg) scale(0.7603677462);
}
.heart:nth-child(2) {
  z-index: 58;
  color: #0144fa;
  transform: translateX(50px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(73deg) rotateZ(3deg) scale(0.7773243585);
}
.heart:nth-child(3) {
  z-index: 57;
  color: #ff0087;
  transform: translateX(75px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(72deg) rotateZ(3deg) scale(0.5852800489);
}
.heart:nth-child(4) {
  z-index: 56;
  color: #fff800;
  transform: translateX(100px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(71deg) rotateZ(3deg) scale(0.3607998434);
}
.heart:nth-child(5) {
  z-index: 55;
  color: #05025e;
  transform: translateX(125px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(70deg) rotateZ(3deg) scale(0.310271705);
}
.heart:nth-child(6) {
  z-index: 54;
  color: #0144fa;
  transform: translateX(150px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(69deg) rotateZ(3deg) scale(0.4801579917);
}
.heart:nth-child(7) {
  z-index: 53;
  color: #ff0087;
  transform: translateX(175px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(68deg) rotateZ(3deg) scale(0.7142871341);
}
.heart:nth-child(8) {
  z-index: 52;
  color: #fff800;
  transform: translateX(200px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(67deg) rotateZ(3deg) scale(0.7974565697);
}
.heart:nth-child(9) {
  z-index: 51;
  color: #05025e;
  transform: translateX(225px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(66deg) rotateZ(3deg) scale(0.6533274845);
}
.heart:nth-child(10) {
  z-index: 50;
  color: #0144fa;
  transform: translateX(250px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(65deg) rotateZ(3deg) scale(0.4146805933);
}
.heart:nth-child(11) {
  z-index: 49;
  c.........完整代码请登录后点击上方下载按钮下载查看