1

コードへのリンクは次のとおりです。長すぎず、54 行 + HTML です。

https://codepen.io/Yonkai/pen/YrdNqE?editors=0100

私が抱えている問題は、22行目で、この行がどのように機能するかを具体的に理解していないことです:

--m-ini: calc(var(--i, 0) - #{$p});

--i (index) カスタム CSS 変数がどのように処理されているのか、またはこれらのインデックスにアクセスしているのか、アニメーションの各呼び出しで各インデックスがどのように選択されているのかわかりません。(SASS からコンパイル):

.ball:nth-child(2) {
  --i: 1;
}
.ball:nth-child(3) {
  --i: 2;
}
.ball:nth-child(4) {
  --i: 3;
}
.ball:nth-child(5) {
  --i: 4;
}
.ball:nth-child(6) {
  --i: 5;
}
.ball:nth-child(7) {
  --i: 6;
}
.ball:nth-child(8) {
  --i: 7;
}
.ball:nth-child(9) {
  --i: 8;
}
.ball:nth-child(10) {
  --i: 9;
}
.ball:nth-child(11) {
  --i: 10;
}
.ball:nth-child(12) {
  --i: 11;
}
.ball:nth-child(13) {
  --i: 12;
}
.ball:nth-child(14) {
  --i: 13;
}
.ball:nth-child(15) {
  --i: 14;
}
.ball:nth-child(16) {
  --i: 15;
}

これは calc() や var() の機能やカスタム変数とは無関係の何かと関係があると思いますが、正直唖然としています。

これは他の誰かのコードに基づいており、YouTube ビデオがありますが、あまり役に立ちません。

4

1 に答える 1

0

22 行目はカスタム変数です--m-ini。--iは別のカスタム変数で、その値は 44 行目に設定されています。41 行目は反復の宣言で、$i1 から 16 までの各反復--iが に設定されてい$iます。

于 2017-10-18T01:37:28.003 に答える