Question

我正在尝试制作一些我需要复制所有条目的内容（多次）然后我想让它旋转并缓慢地落在一个颜色上等等。我现在只是陷入复制颜色，我怎样才能使新的颜色溢出，不增加宽度？

我想要它，以便颜色超出extension_mod = Extension("_swigdemo", ["mult.cpp", "multiplyChannel.cpp"]) div。现在他们只是在分发自己。

有什么想法吗？

wrapper

$(document).on("click", ".duplicate", function() {
  var $wrapper = $('.wrapper .inner');

  $wrapper.find('.color').each(function() {
    $wrapper.append($(this).clone());
  });
});

.wrapper {
  width: 75%;
  margin: 12px auto;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.wrapper .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
}

.wrapper .color {
  width: 100%;
  height: 100%;
}

Answer 1

为了在文档流程中将两个项目放在同一位置，您需要将它们包含在position:relative的父级中，并为其中一个position:absolute; top:0;left:0。另请注意，如果您的元素没有任何内容，则可能需要定义height和width。要使其与父级相同，您可以将其设为top:0;bottom:0;left:0;right:0;。

这是一个从your fiddle开始的演示。按“复制”后，您可能需要检查DOM。我让它恢复原状，所以你可以多次这样做。

但是请注意你的问题目前尚不清楚。我害怕你在“失去了我，让它旋转并缓慢降落”。这真的很有诗意，但不会让你走得太远...

Answer 2

我想你只是简单地过了一些。你所需要的只是一个像这样的线性渐变：

＆＃13;

.wrapper {
  width: 75%;
  margin: 12px auto;
  position: relative;
}

.wrapper .inner {
  width: 100%;
  height: 25px;
  display: flex;
  border-radius: 6px;
  
  overflow: hidden;
}

.wrapper .color {
  width: 100%;
  height: 100%;
}
.new {
  margin-top:5px;
  height:25px;
  border-radius: 6px;
  background-image:linear-gradient(to right,red,red 54%,purple 54%, purple 80%,orange 0);
  background-size:100% 100%;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    background-position:0 0;
  }
  to {
    background-position:-1000px 0;
  }

}

＆＃13;

<div class="wrapper">
  <div class="inner">
    <div class="color" style="background:red;width:231%"></div>
    <div class="color" style="background:purple;width:111%"></div>
    <div class="color" style="background:orange;width:91%"></div>
  </div>
  <div class="new"></div>
</div>

＆＃13;

使内容溢出

2 个答案: