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

代码语言：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;
  color: #ff0087;
  transform: translateX(275px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(64deg) rotateZ(3deg) scale(0.3014583433);
}
.heart:nth-child(12) {
  z-index: 48;
  color: #fff800;
  transform: translateX(300px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(63deg) rotateZ(3deg) scale(0.4187458526);
}
.heart:nth-child(13) {
  z-index: 47;
  color: #05025e;
  transform: translateX(325px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(62deg) rotateZ(3deg) scale(0.6604586208);
}
.heart:nth-child(14) {
  z-index: 46;
  color: #0144fa;
  transform: translateX(350px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(61deg) rotateZ(3deg) scale(0.807327477);
}
.heart:nth-child(15) {
  z-index: 45;
  color: #ff0087;
  transform: translateX(375px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(60deg) rotateZ(3deg) scale(0.7291447752);
}
.heart:nth-child(16) {
  z-index: 44;
  color: #fff800;
  transform: translateX(400px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(59deg) rotateZ(3deg) scale(0.5053885632);
}
.heart:nth-child(17) {
  z-index: 43;
  color: #05025e;
  transform: translateX(425px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(58deg) rotateZ(3deg) scale(0.3533945286);
}
.heart:nth-child(18) {
  z-index: 42;
  color: #0144fa;
  transform: translateX(450px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(57deg) rotateZ(3deg) scale(0.4301950827);
}
.heart:nth-child(19) {
  z-index: 41;
  color: #ff0087;
  transform: translateX(475px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(56deg) rotateZ(3deg) scale(0.6903038592);
}
.heart:nth-child(20) {
  z-index: 40;
  color: #fff800;
  transform: translateX(500px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(55deg) rotateZ(3deg) scale(0.9302956428);
}
.heart:nth-child(21) {
  z-index: 39;
  color: #05025e;
  transform: translateX(525px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(54deg) rotateZ(3deg) scale(0.9792985654);
}
.heart:nth-child(22) {
  z-index: 38;
  color: #0144fa;
  transform: translateX(550px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(53deg) rotateZ(3deg) scale(0.8603673261);
}
.heart:nth-child(23) {
  z-index: 37;
  color: #ff0087;
  transform: translateX(575px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(52deg) rotateZ(3deg) scale(0.7744776003);
}
.heart:nth-child(24) {
  z-index: 36;
  color: #fff800;
  transform: translateX(600px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(51deg) rotateZ(3deg) scale(0.9219584321);
}
.heart:nth-child(25) {
  z-index: 35;
  color: #05025e;
  transform: translateX(625px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(50deg) rotateZ(3deg) scale(1.3256285746);
}
.heart:nth-child(26) {
  z-index: 34;
  color: #0144fa;
  transform: translateX(650px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(49deg) rotateZ(3deg) scale(1.8183207996);
}
.heart:nth-child(27) {
  z-index: 33;
  color: #ff0087;
  transform: translateX(675px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(48deg) rotateZ(3deg) scale(2.2063187965);
}
.heart:nth-child(28) {
  z-index: 32;
  color: #fff800;
  transform: translateX(700px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(47deg) rotateZ(3deg) scale(2.4584689488);
}
.heart:nth-child(29) {
  z-index: 31;
  color: #05025e;
  transform: translateX(725px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(46deg) rotateZ(3deg) scale(2.7470868586);
}
.heart:nth-child(30) {
  z-index: 30;
  color: #0144fa;
  transform: translateX(750px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(45deg) rotateZ(3deg) scale(3.302992094);
}
.heart:nth-child(31) {
  z-index: 29;
  color: #ff0087;
  transform: translateX(775px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(44deg) rotateZ(3deg) scale(2.8119859183);
}
.heart:nth-child(32) {
  z-index: 28;
  color: #fff800;
  transform: translateX(800px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(43deg) rotateZ(3deg) scale(2.5285991721);
}
.heart:nth-child(33) {
  z-index: 27;
  color: #05025e;
  transform: translateX(825px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(42deg) rotateZ(3deg) scale(2.2172027794);
}
.heart:nth-child(34) {
  z-index: 26;
  color: #0144fa;
  transform: translateX(850px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(41deg) rotateZ(3deg) scale(1.7599518585);
}
.heart:nth-child(35) {
  z-index: 25;
  color: #ff0087;
  transform: translateX(875px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(40deg) rotateZ(3deg) scale(1.2516708447);
}
.heart:nth-child(36) {
  z-index: 24;
  color: #fff800;
  transform: translateX(900px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(39deg) rotateZ(3deg) scale(0.9004083092);
}
.heart:nth-child(37) {
  z-index: 23;
  color: #05025e;
  transform: translateX(925px) translateY(0) translateZ(0px) rotateX(-12deg) rotateY(38deg) rotateZ(3deg) scale(0.825148168);
}
..........完整代码请登录后点击上方下载按钮下载查看