Floating heart

floating-heart.markdown

Floating heart

A Pen by yuanchuan on CodePen.

License.

index.html

<css-doodle><style>
  --color: #51eaea, #fffde1, #ff9d76, #FB3569;

  @grid: 30x1 / 100vw 100vh / #270f34; 
  
  :container {
    perspective: 30vmin;
    --deg: @p(-180deg, 180deg);
  }
  
  :after, :before {
    content: '';
    background: @p(--color); 
    @place: @r(100%) @r(100%);
    @size: @r(6px);
    @shape: heart;
  }

  @place: center;
  @size: 18vmin; 

  box-shadow: @m2(0 0 50px @p(--color));
  background: @m100(
    radial-gradient(@p(--color) 50%, transparent 0) 
    @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
    no-repeat
  );

  will-change: transform, opacity;
  animation: scale-up 12s linear infinite;
  animation-delay: calc(-12s / @I * @i);

  @keyframes scale-up {
    0%, 95.01%, 100% {
      transform: translateZ(0) rotate(0);
      opacity: 0;
    }
    10% { 
      opacity: 1; 
    }
    95% {
      transform: 
        translateZ(35vmin) rotateZ(var(--deg));
    }
  }
</style></css-doodle>

scripts

<script src="https://unpkg.com/css-doodle@0.34.0/css-doodle.min.js"></script>

style.css

html, body { 
  margin: 0;
  overflow: hidden;
}