Javascript和CSS动画没有将我的结果放在正确的位置

Javascript and CSS animation not placing my results in the correct spot

本文关键字：位置 结果 我的 CSS 动画 Javascript      更新时间：2023-09-26

我有Javascript和CSS动画，我试图展示一种效果，即名称以垂直方式从袋子里出来，然后名称翻转到水平方式，并放置在我的.shuffled_resultsdiv中。当我在页面上尝试这样做时，名称会飞成一个圆圈并放置在正确的位置，但我不希望名称在屏幕上飞成一圈。它看起来像一只四处飞翔的鸟。

我创建了一个小提琴，但结果与我的页面中发生的不一样。我确信这与我的div位于页面下方而不是上角有关。

https://jsfiddle.net/n2o672q3/

为了让它发挥作用，我玩了很多，但我所做的似乎都不起作用。

我把这段代码弄得一团糟。。

.shuffle_results {
  position: relative;
    z-index: -1;
    font-size: 2em;
    -webkit-animation:spin 3s linear;
    -moz-animation:spin 3s linear;
    animation:spin 3s linear;
}

有人知道我该如何让它正常工作吗？

尝试这样做，首先将您的所有子内容放在另一个div中，我们将对其应用溢出属性

<div class="main-bag"> <!--Making all content wrap inside main div-->
    <div class="shuffle_results" id="results">Bob</div>
    <div class="shuffle_results" id="results">George</div>  
    <div class="shuffle_results" id="results">Mary</div>
    <div class="shuffle_results" id="results">Lucy</div>
    <img id='paperBag' src="http://www.thecuriouscaterpillar.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/a/bag_to_white.jpg" width="200px" />
</div>

然后在css 中

.main-bag{
    overflow:hidden;
}

这将确保位于主div边界之外的任何子内容都会从中截取

相关文章：