1

帮助褶皱，如何在 scss 上为该 HTML 代码配对循环

.pot_st0 {
  fill: #15630D;
}

.pot_st1 {
  fill: #012D3F;
}

.pot_st2 {
  fill: #013D51;
}

.pot_st3 {
  fill: #01445F;
}

.pot_st4 {
  fill: none;
  stroke: #011F2B;
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.pot_st5 {
  opacity: 0.2;
  fill: #012D3F;
  enable-background: new;
}

.pot_st6 {
  fill: #011F2B;
}

.pot_st7 {
  clip-path: url(#SVGID_2_);
}

.pot_st8 {
  fill: #FFD900;
}

.pot_st9 {
  fill: #FFE935;
}

.pot_st10 {
  fill: #FFAE00;
}

.pot_st11 {
  fill: #FF8A00;
}

.pot_st12 {
  fill: #FF7A00;
}

.pot_st13 {
  fill: #DD5300;
}

.pot_st14 {
  fill: #015C8C;
}


$translateMyCoin: (
        translateCoin1: translate(0, -100),
        translateCoin2: translate(-100, 10),
        translateCoin3: translate(-80, 5),
        translateCoin4: translate(-60, 10),
        translateCoin5: translate(-70, 11),
        translateCoin6: translate(-75, 7),
        translateCoin7: translate(-60, 10),
        translateCoin8: translate(-20, 8),
        translateCoin9: translate(0, -5),
        translateCoin10: translate(30, 10),
        translateCoin11: translate(30, -17),
        translateCoin12: translate(-40, -10),
        translateCoin13: translate(-65, -20),
        translateCoin14: translate(-95, -15),
        translateCoin15: translate(-105, -5),
        translateCoin16: translate(-75, -15),
        translateCoin17: translate(-20, -25),
        translateCoin18: translate(-10, -5),
        translateCoin19: translate(-40, -15),
        translateCoin20: translate(5, -25)
);

@for $i from 1 through 20 {
  .animateCoin:nth-child(#{$i}) {
    animation: coinMoving+$i 1s ease-out;
    animation-fill-mode: forwards;
  }
}
@for $i from 1 through 20 {
  @keyframes coinMoving  {
    0% {transform: translate(0, -100);}
    100% {
      transform: #{map-get($translateMyCoin,'translate'+$i)};
    }
  }
}
<svg version="1.1" id="svg_pot" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 337 340" pot_style="enable-background:new 0 0 337 340;" xml:space="preserve">
 <g id="money" class="pot_st7">
            <defs>
			  <g id="coin">
				<circle class="pot_st8" cx="205.8" cy="145.2" r="15"/>
				<path class="pot_st9" d="M205.8,130.7h-0.3l-14.2,14.2v0.3c0,2.7,0.7,5.2,2,7.4l19.8-19.8C211,131.4,208.5,130.7,205.8,130.7
					L205.8,130.7z M220.2,143.5c-0.2-1.8-0.8-3.5-1.6-5.1L199,158c1.5,0.8,3.3,1.4,5.1,1.6L220.2,143.5L220.2,143.5z M196.1,155.9
					l20.5-20.5l-0.9-0.9L195.2,155L196.1,155.9z"/>
				<circle class="pot_st8" cx="205.8" cy="145.2" r="11.8"/>
				<circle class="pot_st10" cx="205.8" cy="145.2" r="10.5"/>
				<path class="pot_st11" d="M205.8,135.1c5.7,0,10.4,4.6,10.5,10.3v-0.2c0-5.8-4.7-10.5-10.5-10.5s-10.5,4.7-10.5,10.5v0.2
					C195.4,139.7,200.1,135.1,205.8,135.1z"/>
				<path class="pot_st8" d="M211.6,149.8l-2.2-2.2c0.1,0,0.2,0,0.4-0.1c1.3-0.3,2-1.6,1.7-2.9c-0.2-0.6-0.6-1.2-1.1-1.5
					c0.3-0.5,0.4-1.2,0.3-1.8c-0.3-1.1-1.2-1.8-2.3-1.8c-0.2,0-0.4,0-0.6,0.1c-0.6,0.2-1.2,0.6-1.5,1.1c0-0.6-0.3-1.1-0.7-1.5
					c-0.9-0.9-2.5-0.9-3.4,0c-0.5,0.5-0.7,1.1-0.7,1.7c-0.7,0-1.3,0.2-1.7,0.7c-0.9,0.9-0.9,2.5,0,3.4c0.4,0.4,0.9,0.6,1.5,0.7
					c-0.5,0.3-0.8,0.8-1,1.4c-0.2,0.6-0.1,1.3,0.2,1.8c0.3,0.6,0.8,0.9,1.5,1.1c0.6,0.2,1.3,0.1,1.8-0.3c0.3,0.6,0.8,1,1.5,1.1
					c1.3,0.3,2.6-0.5,2.9-1.7c0-0.1,0.1-0.2,0.1-0.4l2.2,2.2c0.2,0.2,0.4,0.2,0.6,0.2c0.2,0,0.4-0.1,0.6-0.2
					C211.9,150.6,211.9,150.1,211.6,149.8z"/>
				<path class="pot_st12" d="M211.3,150l-3-3c0.4,0.2,0.9,0.3,1.4,0.1c1.1-0.3,1.7-1.4,1.4-2.5c-0.2-0.7-0.7-1.2-1.4-1.4
					c0.5-0.5,0.7-1.2,0.5-1.9c-0.3-1.1-1.4-1.7-2.5-1.4c-0.7,0.2-1.2,0.7-1.4,1.4l-0.7,1.5l0.2-1.7c0.1-0.6-0.1-1.3-0.6-1.7
					c-0.8-0.8-2.1-0.8-2.8,0c-0.5,0.5-0.7,1.2-0.5,1.9c-0.7-0.2-1.4,0-1.9,0.5c-0.8,0.8-0.8,2.1,0,2.8c0.5,0.5,1.3,0.7,1.9,0.5
					l1.4-0.1l-1.3,0.6c-0.7,0.2-1.2,0.7-1.4,1.4c-0.3,1.1,0.4,2.2,1.4,2.5c0.7,0.2,1.4,0,1.9-0.5c0.2,0.6,0.7,1.2,1.4,1.4
					c1.1,0.3,2.2-0.4,2.5-1.4c0.1-0.5,0.1-1-0.1-1.4l3,3c0.2,0.2,0.4,0.2,0.6,0C211.5,150.5,211.5,150.2,211.3,150L211.3,150z"/>
					<path class="pot_st13" d="M210.2,143.7v-0.2c-0.2-0.1-0.3-0.2-0.5-0.2v0.4H210.2z M209.7,143.2
						C209.7,143.3,209.7,143.3,209.7,143.2z"/>
					<path class="pot_st13" d="M205.6,143.2l0.7-1.5c0.2-0.7,0.7-1.2,1.4-1.4c1.1-0.3,2.2,0.4,2.5,1.4v-0.4c-0.3-1.1-1.4-1.7-2.5-1.4
						c-0.7,0.2-1.2,0.7-1.4,1.4l-0.6,1.4L205.6,143.2L205.6,143.2z M202,146.1l1.3-0.6l-1.1,0.1l-0.2,0.1c-0.7,0.2-1.2,0.7-1.4,1.4
						c-0.1,0.2-0.1,0.5-0.1,0.7c0-0.1,0-0.2,0.1-0.3C200.8,146.8,201.3,146.3,202,146.1z M209.7,143.7c0.6,0.2,1.2,0.7,1.4,1.4v-0.4
						c-0.2-0.6-0.6-1.1-1.1-1.3L209.7,143.7L209.7,143.7z M208.3,147.4l3,3c0,0,0,0.1,0.1,0.1c0.1-0.2,0.1-0.4-0.1-0.5l-3-3V147.4z
						 M202.4,139.8c0.8-0.8,2.1-0.8,2.8,0c0.3,0.3,0.5,0.8,0.6,1.2c0.1-0.6-0.1-1.2-0.6-1.6c-0.8-0.8-2.1-0.8-2.8,0
						c-0.4,0.4-0.6,1-0.6,1.6C201.9,140.6,202.1,140.1,202.4,139.8z M200,142.2c0.5-0.5,1.2-0.7,1.9-0.5v-0.4
						c-0.6-0.1-1.3,0-1.9,0.5c-0.4,0.4-0.6,1-0.6,1.6C199.4,143,199.6,142.6,200,142.2L200,142.2z"/>
			</g>
            </defs>
            <use id="coin1" class="animateCoin" xlink:href="#coin" transform="translate(0, -100)"/>
            <use id="coin2" class="animateCoin" xlink:href="#coin" transform="translate(-100, 10)" />
            <use id="coin3" class="animateCoin" xlink:href="#coin" transform="translate(-80, 5)" />
            <use id="coin4" class="animateCoin" xlink:href="#coin" transform="translate(-60, 10)" />
            <use id="coin5" class="animateCoin" xlink:href="#coin" transform="translate(-70, 11)" />
            <use id="coin6" class="animateCoin" xlink:href="#coin" transform="translate(-75, 7)" />
            <use id="coin7" class="animateCoin" xlink:href="#coin" transform="translate(-60, 10)" />
            <use id="coin8" class="animateCoin" xlink:href="#coin" transform="translate(-20, 8)" />
            <use id="coin9" class="animateCoin" xlink:href="#coin" transform="translate(0, -5)" />
            <use id="coin10" class="animateCoin" xlink:href="#coin" transform="translate(30, 10)" />

            <use id="coin11" class="animateCoin" xlink:href="#coin" transform="translate(30, -17)" />
            <use id="coin12" class="animateCoin" xlink:href="#coin" transform="translate(-40, -10)" />
            <use id="coin13" class="animateCoin" xlink:href="#coin" transform="translate(-65, -20)" />
            <use id="coin14" class="animateCoin" xlink:href="#coin" transform="translate(-95, -15)" />
            <use id="coin15" class="animateCoin" xlink:href="#coin" transform="translate(-105, -5)" />
            <use id="coin16" class="animateCoin" xlink:href="#coin" transform="translate(-75, -15)" />
            <use id="coin17" class="animateCoin" xlink:href="#coin" transform="translate(-20, -25)" />
            <use id="coin18" class="animateCoin" xlink:href="#coin" transform="translate(-10, -5)" />
            <use id="coin19" class="animateCoin" xlink:href="#coin" transform="translate(-40, -15)" />
            <use id="coin20" class="animateCoin" xlink:href="#coin" transform="translate(5, -25)" />
		</g>

 
 
 
 </svg>

我需要每个硬币从 transform:translate(0, -100); 到 $translateMyCoin 值如何解决？如果代码的第一部分仍然可以工作，那么第二部分就不行了。我不知道如何为@keyframes https://codepen.io/anon/pen/正确设置循环

4

0 回答 0