javascript - CSS3动画的问题

Question

这是我的第一个问题，对此我很高兴

我用 fullpage.js 创建了一个页面 Roadmap

我会用 CSS3 创建一个动画，所以我看到了一个简单的 tutorial

我按照说明操作并将代码粘贴到 roadmap.html动画效果很好，但我不知道为什么有 14 个蓝色背景的火箭。可以看到“故障”Here

js有什么错误吗？是css的问题吗？

<style>#outerspace{position:relative;height:400px;background:#0c0440 url('http://www.the-art-of-web.com/images/rocket.gif');color:#fff;}div.rocket{position:absolute;bottom:10px;left:20px;-webkit-transition:3s ease-in;-moz-transition:3s ease-in;-o-transition:3s ease-in;transition:3s ease-in;}div.rocket div{width:92px;height:215px;background:url('http://www.the-art-of-web.com/images/rocket.gif') no-repeat;-webkit-transition:2s ease-in-out;-moz-transition:2s ease-in-out;-o-transition:2s ease-in-out;transition:2s ease-in-out;}#outerspace:hover div.rocket{-webkit-transform:translate(0px,-5400px);-moz-transform:translate(0px,-5400px);-o-transform:translate(0px,-5400px);-ms-transform:translate(0px,-5400px);transform:translate(0px,-5400px);}</style>

提前致谢

Answer 1

这是因为在您的 CSS 中您所说的第一件事是 #outerspace :

background: #0c0440 url('http://www.the-art-of-web.com/images/rocket.gif');

url 部分根本不应该存在。如果你写了 no-repeat ，仍然会有 1 枚火箭不应该在那里，所以总结一下:

取出url('http://www.the-art-of-web.com/images/rocket.gif')来自 background的 #outerspace .

代码应该是:

background: #0c0440;

这是你的保证:

#outerspace{position:relative;height:400px;background:#0c0440;color:#fff;}div.rocket{position:absolute;bottom:10px;left:20px;-webkit-transition:3s ease-in;-moz-transition:3s ease-in;-o-transition:3s ease-in;transition:3s ease-in;}div.rocket div{width:92px;height:215px;background:url('http://www.the-art-of-web.com/images/rocket.gif') no-repeat;-webkit-transition:2s ease-in-out;-moz-transition:2s ease-in-out;-o-transition:2s ease-in-out;transition:2s ease-in-out;}#outerspace:hover div.rocket{-webkit-transform:translate(0px,-5400px);-moz-transform:translate(0px,-5400px);-o-transform:translate(0px,-5400px);-ms-transform:translate(0px,-5400px);transform:translate(0px,-5400px);}

<div id="outerspace">
<div class="rocket">
<div></div>
BoneOS
</div>#outerspace
</div>