Html 更改颜色背景幻灯片白色渐变3

我想将橙色背景更改为绿色，但使用一些动画，例如，当它是橙色时，它将变为绿色

如果你能看看我组装的两个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>

天平个人版
4.235632麦克风
余额业务
4.235632麦克风

您需要更改每个离子卡的背景颜色

 <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>

天平个人版
4.235632麦克风
余额业务
4.235632麦克风