将 lottie 动画置于后台

Question

我不知道如何在后台使用 Lottie 动画并在其上放置文本。

我正在使用 Svelte 以防万一。

<section>

  <div class="animation">

    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <lottie-player src="static\animation.json" background="transparent" speed="1" style="width: 1000px; height: 1000px;" loop autoplay></lottie-player>

    <h1>
      Title
    </h1>

    <h2>
      Text
    </h2>
  </div>
</section>

<style>
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  
  h1 {
    width: 100%;
  }
  
  h2 {
    text-align: center;
  }
</style>

我尝试使用 z-index，但它没有任何改变。

Answer 1

不知道你是什么意思，希望对你有帮助。

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;
}

.title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

<section>
    <div class="animation">
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
        <lottie-player src="static\animation.json" background="transparent" speed="1" style="width: 1000px; height: 1000px;" loop autoplay></lottie-player>

    </div>
    <div class="title">
        <h1>Title</h1>
        <h2>Text</h2>
    </div>
</section>

将 lottie 动画置于后台

Put lottie animation in background

html

css

svelte

lottie