애니메이션 떠다니는 하트 효과 만드는 방법 (Pure CSS & HTML)

Source: Dev.to

1. HTML 구조

마크업은 간단합니다: “하늘” 역할을 하는 래퍼와 하트가 될 <div class="heart"> 요소들의 집합입니다.
래퍼에는 position: relative;와 overflow: hidden;을 지정해 하트가 컨테이너 안에 머무르고 위쪽 경계를 벗어날 때 부드럽게 사라지도록 합니다.

<div class="sky">
    <div class="heart x1"></div>
    <div class="heart x2"></div>
    <div class="heart x3"></div>
    <!-- 필요에 따라 더 많은 하트를 추가 -->
</div>

<h2>우리 고객은 우리를 사랑합니다!</h2>

2. 순수 CSS로 하트 그리기

하트는 하나의 요소와 그 ::before, ::after 의사 요소만으로 만들어집니다.
이 기법은 정사각형을 만들고 두 개의 겹치는 알약 모양 원을 추가합니다.

.heart {
    position: relative;
}

/* 하트의 윗부분 */
.heart::before,
.heart::after {
    position: absolute;
    content: "";
    left: 18px;
    top: 0;
    width: 18px;
    height: 30px;
    background: #CC2022;               /* 하트 색상 */
    border-radius: 30px 30px 0 0;      /* 알약 모양 */
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

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

3. 움직임 만들기 (키프레임)

하트는 위로 떠오르면서 좌우로 흔들려야 합니다. 두 개의 키프레임 애니메이션이 이를 담당합니다:

/* 수직 이동 */
@keyframes moveclouds {
    0%   { top: 500px; }
    100% { top: -500px; }
}

/* 좌우 흔들림 */
@keyframes sideWays {
    0%   { margin-left: 0px; }
    100% { margin-left: 50px; }
}

4. 다양성 부여

모든 하트가 똑같이 움직이면 로봇 같은 느낌이 납니다. .x1 … .x16 같은 서로 다른 클래스를 부여해 크기, 투명도, 시작 위치, 애니메이션 속도를 다양하게 합니다.

/* 작고 반투명, 빠름 */
.x1 {
    left: 5%;
    transform: scale(0.9);
    opacity: 0.6;
    animation:
        moveclouds 15s linear infinite,
        sideWays   4s ease-in-out infinite alternate;
}

/* 더 크고 불투명, 느림 */
.x2 {
    left: 25%;
    transform: scale(0.6);
    opacity: 0.9;
    animation:
        moveclouds 25s linear infinite,
        sideWays   5s ease-in-out infinite alternate;
}

/* 오른쪽 끝에 매우 빠른 하트 */
.x5 {
    left: 88%;
    transform: scale(0.8);
    opacity: 0.3;
    animation:
        moveclouds 7s linear infinite,
        sideWays   1s ease-in-out infinite alternate;
}

이 속성들이 하는 일

• left – 컨테이너 안에서 하트를 가로로 배치합니다.
• transform: scale() – 크기를 조절해 깊이감(패럴랙스 효과)을 만듭니다.
• opacity – 멀리 있는 하트를 흐리게 하여 거리감을 표현합니다.
• animation – 클래스마다 다른 지속시간으로 수직·수평 애니메이션을 동시에 실행해 유기적이고 무작위적인 모습을 제공합니다.

결론

하트를 overflow: hidden이 적용된 컨테이너 안에 넣으면 가볍고 시각적으로 매력적인 떠다니는 하트 효과를 얻을 수 있으며, 성능에 큰 부담을 주지 않습니다. 이 코드는 어떤 프레임워크(예: Alpine.js)에도 적용 가능하고, 배경 색상, 애니메이션 속도, 하트 개수 등을 변경해 자유롭게 커스터마이징할 수 있습니다.

행복한 코딩 되세요!