html - 更改颜色背景幻灯片白色渐变 IONIC 3

Question

我想把橙色的背景变成绿色，但是有一些动画，例如，当它是橙色的时候它会变成绿色。

如果你能看看我组装的两个 gif，你就会明白我的意思。

目前情况如何 -> GIF

我希望他们变成什么样 -> GIF

HOME.HTML

<ion-content >
  <div  style="background-color: #f87f0e; padding: 10px;">
    <ion-slides pager>
      <ion-slide >
        <ion-card style="border-radius: 15px;margin-bottom: 35px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE PERSONAL</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="border-radius: 15px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE BUSINESS</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

Answer 1

您需要更改每个 ionic 卡的背景颜色。

 <ion-content >
  <div  style="background-color: #f87f0e; padding: 10px;">
    <ion-slides pager>
      <ion-slide >
        <ion-card style="background-color: red; border-radius: 15px;margin-bottom: 35px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE PERSONAL</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="background-color: green; border-radius: 15px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE BUSINESS</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>