javascript – CSS3动画的问题

发布时间：2020-12-14 22:37:55 所属栏目：资源来源：网络整理

导读：这是我的第一个问题,我为此感到高兴我创建了一个fullpage.js Roadmap的页面我会用CSS3创建一个动画,所以我看到了一个简单的tutorial 我按照说明操作,然后将代码粘贴到roadmap.html 动画效果很好,但我不知道为什么有14枚带有蓝色遮挡物的火箭.你可以看到“

这是我的第一个问题,我为此感到高兴

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

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

我按照说明操作,然后将代码粘贴到roadmap.html
动画效果很好,但我不知道为什么有14枚带有蓝色遮挡物的火箭.你可以看到“故障”Here

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


提前致谢


最佳答案
这是因为您在CSS中首先要为#outerspace所说的内容：

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

网址部分根本不应该存在.如果你写了不重复,那么仍然会有一个不应该存在的火箭,所以总结一下：
从#outerspace的背景中取出url(‘http://www.the-art-of-web.com/images/rocket.gif’).
代码应该是：

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);}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!