Question

我有一个CSS3幻灯片，每个孩子都有animation-delay，但这不是动态的，因为对于每个标记，我应该添加nth-child，

有没有办法自动添加动画延迟到li标签？

这是CSS代码：

.cb-slideshow li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) span {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}

.cb-slideshow li:nth-child(4) span {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) span {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) span {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}

我想更改此代码，为每个代码添加6秒延迟。

Answer 1

您可以使用PHP动态回显样式的每个部分，或者将其集成到css中。例如

.button:hover {
    border: 10px solid;
    transition: <?php echo $lot ?>;
}

其中$ lot是动画时间。

我不知道如何在PHP中获得nth-child（N），但毫无疑问是一种方法。很抱歉，如果这不是非常有用，只是想说php是一个很好的方法。

Answer 2

除了动态添加内联样式或使用javascript

之外，无法动态处理它

例如

＆＃13;

<div class="cb-slideshow">
  <li style="animation-delay: 1s;">test text</li>
  <li style="animation-delay: 2s;">test text</li>
  <li style="animation-delay: 3s;">test text</li>
  <li style="animation-delay: 4s;">test text</li>
  <li style="animation-delay: 5s;">test text</li>
</div>

＆＃13;

import org.jfree.dataset;

＆＃13;

自动向li添加动画延迟

2 个答案: