Question

我有4个文本，宽8张图像。我创建了动画，您可以查看是否复制我的代码。我需要为每个文本创建四个带有阴影的框，但是当我这样做时，动画将无法正常工作。如何在不丢失动画的情况下做到这一点？我有这个CSS：

<div class='block'>
  <ul>
    <li><span class="color-block" style="background-color:blue;"></span>Tag_name 1</li>
    <li><span class="color-block" style="background-color:red;"></span>Tag_name 2</li>
    <li><span class="color-block" style="background-color:green;"></span>Tag_name 3</li>
    <li><span class="color-block" style="background-color:yellow;"></span>Tag_name 4</li>
    <li><span class="color-block" style="background-color:purple;"></span>Tag_name 5</li>
  </ul>
</div>

这是html：

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

:root {
  --time: 24;
}

.div-txt p.label {
  color: #0065de;
  font: bold 16px 'Arial';
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
}

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

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

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

.div-txt:nth-child(3) p.label:nth-child(5) {
  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 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 300px;
  margin: 0 auto;
}

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

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

@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%;
  }
}

body {
  margin: 0;
}

Connect需要更改其颜色清晰度，在进行第二次校准后需要更改其颜色，并且在图像更改时，所有其他文本更改此过程。对于1个文本，有2张图片。

CSS上的盒子阴影，使文本更接近图像

0 个答案: