

プログラミング初心者です。プログラミング学習でアニメーションをつける練習をしていてネットで落ち葉が降るアニメーションを見つけました。  
サイトを参考にしつつVScodeでsampleというフォルダを作り同じディレクトリ内にindex.htmlとmain.jsと落ち葉の画像とcss/style.cssの計4種類のファイルを作りました。

こちらのindex.htmlでCSSとjsファイルを読み込み下記のCSSの任意のパスを記入というコード部分にbackground-image:
url('/img/leaf-1.svg'); というコードを書いたところ無事落ち葉のアニメーションが降ってくるサイトを作れました。

しかしネットショップやwordpressで同じコードを記入してもCSSファイルとJSファイルのディレクトリが他の場所にあるのでうまく機能しません。  
下記のコードを利用してネットショップやwordpressに落ち葉のアニメーションをつけることは可能なのでしょうか？  
アニメーションのコードは以下のサイトを参考にしました。

<https://web-dev.tech/front-end/javascript/autumn-leaves-falling-effect/>

下記のコードがサイトに載っているCSSのコードです。

[code]

    /* ===== 落ち葉を表示するコンテナのスタイル ===== */
    .leaves-container {
      position: relative;
      height: 100vh; /* コンテナの高さ */
      width: 100%; /* コンテナの横幅 */
      overflow: hidden; /* コンテナからはみ出した要素を隠す */
    }
    
    /* ===== 落ち葉のスタイル ===== */
    
    /* 落ち葉の共通スタイル */
    .leaf {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      position: absolute;
      animation: animate-leaf 8s linear;
    }
    
    /* 落ち葉1 */
    .leaf-1 {
      background-image: url('img/leaf-1.svg'); /* 任意のパスを記入 */
    }
    
    /* 落ち葉2 */
    .leaf-2 {
      background-image: url('img/leaf-2.svg'); /* 任意のパスを記入 */
    }
    
    /* 落ち葉3 */
    .leaf-3 {
      background-image: url('img/leaf-3.svg'); /* 任意のパスを記入 */
    }
    
    /* ===== 落ち葉が降るアニメーション ===== */
    @keyframes animate-leaf {
      0% {
        opacity: 0;
        top: 0;
        transform: rotate(0);
      }
    
      10% {
        opacity: 1;
      }
    
      90% {
        opacity: 1;
      }
    
      100% {
        opacity: 0;
        top: 100vh;
        transform: rotate(1080deg);
      }
    }
    
[/code]


CC BY-SA 4.0
2021-04-20T13:53:52.323
75408
2021-04-20T16:34:46.687
2021-04-20T16:34:46.687
3060
44884
question
html css
ネットショップやホームページでアニメーションをつけたい