아임웹 둥둥 떠다니는 애니메이션 코드

🛠️ 아임웹에서도 가능한 ‘둥둥~’ 코드

아래 코드를 복사해서,
아임웹의 코드 위젯에 붙여넣기만 하면 끝이에요!

<div class="floating-image-container">
  <img src="https://cdn.imweb.me/thumbnail/20250530/a650705470df4.png" 
       alt="떠다니는 이미지" 
       class="floating-image" 
       style="width: 250px;">
</div>
<style>
  /* 페이지 스타일 */
  body, html {
    margin: 0;
    padding: 0;
  }
  
  /* 컨테이너 스타일 (중앙 정렬로 변경) */
  .floating-image-container {
    position: relative;
    width: 250px; /* 이미지 크기에 맞게 조정 */
    height: auto; /* 높이는 자동으로 조정 */
    margin: 0 auto; /* 중앙 정렬 적용 */
    padding: 0; /* 패딩 제거 */
    /* float 제거 */
  }
  /* 떠다니는 이미지 애니메이션 */
  .floating-image {
    position: relative;
    display: block;
    animation: float 3s ease-in-out infinite; /* 애니메이션 설정 */
  }
  /* 애니메이션 정의 */
  @keyframes float {
    0% {
      transform: translateY(0); /* 원래 위치 */
    }
    50% {
      transform: translateY(-15px); /* 위로 15px 이동 */
    }
    100% {
      transform: translateY(0); /* 원래 위치로 복귀 */
    }
  }
</style>