Vào việc luôn, bài này mình share đoạn code tạo trái tim đập thả thính siêu hot ae tham khảo nhé. Chỉ cần tạo 1 file có đuôi là .html và paste đoạn code phía dưới save và chạy lên là oke rồi. À ae có thể đổi tên ở dòng 338 bằng tên mình thích nhé hoặc xóa đi nếu không muốn hiện tên hehe. Còn chần chừ gì nữa copy paste gửi cờ rớt thuiiii 😘

  
  
  
  phamvantu.com



  html,
  body {
    height: 100%;
    padding: 0;
    margin: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .box {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
  }

  canvas {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  #pinkboard {
    position: relative;
    margin: auto;
    height: 500px;
    width: 500px;
    animation: animate 1.3s infinite;
  }

  #pinkboard:before,
  #pinkboard:after {
    content: '';
    position: absolute;
    background: #FF5CA4;
    width: 100px;
    height: 160px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }

  #pinkboard:before {
    left: 100px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
      0 10px 10px rgba(0, 0, 0, 0.22);
  }

  #pinkboard:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }

  @keyframes animate {
    0% {
      transform: scale(1);
    }

    30% {
      transform: scale(.8);
    }

    60% {
      transform: scale(1.2);
    }

    100% {
      transform: scale(1);
    }
  }



  
    
  
  
    /*
   * Settings
   */
    var settings = {
      particles: {
        length: 2000, // maximum amount of particles
        duration: 2, // particle duration in sec
        velocity: 100, // particle velocity in pixels/sec
        effect: -1.3, // play with this for a nice effect
        size: 13, // particle size in pixels
      },
    };
    /*
     * RequestAnimationFrame polyfill by Erik Möller
     */
    (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0;a = duration && firstActive != firstFree) {
          firstActive++;
          if (firstActive == particles.length) firstActive = 0;
        }


      };
      ParticlePool.prototype.draw = function (context, image) {
        // draw active particles
        if (firstActive 
  Anh Thư