Question

我有动画。在此动画中，当图像更改时，文本也会更改，但是我需要在图像更改时更改文本块的背景。我怎样才能做到这一点？这是html：

                 <div class="div-wrap">
                  <div class="div-wrap-txt">
                    <div class="div-txt">
                      <img src="img/connect.svg">
                      <p class="label">Connect</p>
                      <p style="color: #0065de; font-size: 1.125rem;">shoulders, <br>turn on it and connect application <br>with device.</p>
                    </div>
                    <div class="div-txt">
                      <img src="img/calibrate.svg">
                      <p class="label">Calibrate</p>
                      <p style="color: #0065de; font-size: 1.125rem;">set up calibration to <br>help device remember your upright <br>and slouch positions.</p>
                    </div>
                  </div>
                  <div class="div-img">
                    <img src="img/mockups/2.png" title="Image 1"> 
                    <img src="img/mockups/3.png" title="Image 2">
                    <img src="img/mockups/5.png" title="Image 3">
                    <img src="img/mockups/6.png" title="Image 4">
                    <img src="img/mockups/7.png" title="Image 5">
                    <img src="img/mockups/8.png" title="Image 6">
                    <img src="img/mockups/9.png" title="Image 7">
                    <img src="img/mockups/10.png" title="Image 8">
                  </div>
                  <div class="div-wrap-txt">
                    <div class="div-txt">
                      <img src="img/train.svg">
                      <p class="label">Train</p>
                      <p style="color: #0065de; font-size: 1.125rem;">Train your postt, <br>set up daily goal to improve gradually <br>your posture.</p>
                    </div>
                    <div class="div-txt">
                      <img src="img/analyze.svg">
                      <p class="label">Analyze</p>
                      <p style="color: #0065de; font-size: 1.125rem;">analyze the <br>progress you’ve made from first <br>training to the last.</p>
                    </div>
                  </div>
                </div>

这是CSS：

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

:root {
  --time: 24;
}

.div-txt img {
  width: 36px;
  height: 36px;
}

.div-txt p.label {
  margin-top: 15px;
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: #0065DE;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
}

.div-wrap-txt {
    margin-bottom: 70px;
}

.div-wrap-txt:nth-child(1) .div-txt:nth-child(1) p.label {
  animation-delay: 0s;
}

.div-wrap-txt:nth-child(1) .div-txt:nth-child(2) p.label {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-wrap-txt:nth-child(3) .div-txt:nth-child(1) p.label {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-wrap-txt:nth-child(3) .div-txt:nth-child(2) p.label {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img {
  position: relative;
  height: 600px;
  width: 600px;
  /*  border: 2px solid #ccc;*/
  /* background: radial-gradient(ellipse at center, rgba(153, 153, 153, 1) 0%, rgba(0, 0, 0, 1) 100%);
  */
}

.div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) {
  animation-delay: 0s;
}

.div-img img:nth-child(2) {
  animation-delay: calc(var(--time) / 8 * 1s);
}

.div-img img:nth-child(3) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-img img:nth-child(4) {
  animation-delay: calc(var(--time) / 2.66 * 1s);
}

.div-img img:nth-child(5) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-img img:nth-child(6) {
  animation-delay: calc(var(--time) / 1.6 * 1s);
}

.div-img img:nth-child(7) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img img:nth-child(8) {
  animation-delay: calc(var(--time) / 1.14 * 1s);
}

.div-txt {
  width: 300px;
  margin: 20px auto;
  padding: 10px 0 3px;
/*  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);*/
  box-shadow: 0 6px 8px rgba(0, 0, 0, .25);
}

@keyframes color-change {
  0%,
  25%,
  100% {
    color: black;
  }
  1%,
  24% {
    color: #F41000;
  }
}

@keyframes fade {
  0%,
  20%,
  100% {
    opacity: 0;
    z-index: auto;
  }
  1%,
  99% {
    z-index: 1;
  }
  8%,
  12% {
    opacity: 1;
  }
}
.womansvg {
    text-align: center;
}

@media all and (min-width: 1170px) {
  .div-wrap {
    flex-flow: row nowrap;
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .div-img {
    max-width: 100%;
    height:400px;  
  }
}

因此，对于2张图像，我只有一个文本，而2张图像发生了变化，text1更改了其颜色，但是我需要更改块的背景，而不是文本。我该怎么办？

Answer 1

请使用此代码

.div-txt {
            animation-duration: calc(var(--time) * 1s);
            animation-iteration-count: infinite;
            animation-name: color-change;
        }
 .div-txt p.label {
            margin-top: 15px;
            font-family: 'Cabin', sans-serif;
            font-weight: 500;
            font-size: 1.25rem;
            color: #0065DE;
        }
 .div-wrap-txt:nth-child(1) .div-txt:nth-child(1)  {
            animation-delay: 0s;
        }

        .div-wrap-txt:nth-child(1) .div-txt:nth-child(2)  {
            animation-delay: calc(var(--time) / 4 * 1s);
        }

        .div-wrap-txt:nth-child(3) .div-txt:nth-child(1)  {
            animation-delay: calc(var(--time) / 2 * 1s);
        }

        .div-wrap-txt:nth-child(3) .div-txt:nth-child(2)  {
            animation-delay: calc(var(--time) / 1.33 * 1s);
        }
@keyframes color-change {

            0%,
            25%,
            100% {
                background: #ffffff;
            }

            1%,
            24% {
                background: #F41000;
            }
        }

您使用的是颜色而不是背景，因此它会更改文本颜色而不是背景。

谢谢。

更改div块的背景

1 个答案: