1

我一直在玩这个演示：http ://ademilter.com/lab/liffect/（选择：zoomIn）

ul[data-liffect="zoomIn"] li {
  opacity: 0;
  position: relative;
  display:inline-block;
  margin:0;
  padding:0;
  -webkit-animation: zoomIn 600ms ease both;
  -webkit-animation-play-state: paused;
  -moz-animation: zoomIn 600ms ease both;
  -moz-animation-play-state: paused;
  -o-animation: zoomIn 600ms ease both;
  -o-animation-play-state: paused;
  animation: zoomIn 600ms ease both;
  animation-play-state: paused;
}

然后我尝试自己重现这种效果，我发现如果列表项属性设置inline为而不是inline-block.

如果显示属性是inline它只会淡入。

有趣的是，如果您使用开发面板查看原始站点，演示中的列表项没有将 display 属性设置为inline-block.

所以我必须制作我的列表项inline-block，但这给了我元素的边距。

有没有办法解决？

我在这里挑出了动画效果。

如果元素的 display 属性设置为 ，您可以为元素的比例设置动画inline吗？

4

1 回答 1

0

是的，有办法解决它。您可以inline-block通过键入不带空格的元素来删除您使用的空间。

像这样的东西：

<ul data-liffect="zoomIn"><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li><li><img src="http://cambelt.co/100x100"></li></ul>​

这样做的原因是因为你看到的空格实际上不是 a margin，它是一个空格字符，就像你在输入的单词之间得到的一样。内联块以相同的方式呈现这些。另一种解决方法可能是使用该float属性。

这是一个演示。

希望有帮助！

于 2012-12-15T10:15:36.737 回答