[英]Problems with CSS3 animation
This is my first question and I'm so happy for this 这是我的第一个问题,我为此感到高兴
I created a page with fullpage.js Roadmap 我创建了一个包含fullpage.js 路线图的页面
I would create an animation with CSS3, so I saw an easy tutorial 我会用CSS3创建一个动画,所以我看到了一个简单的教程
I followed instructions and I pasted code to roadmap.html Animation works well, but I don't know why there are 14 rockets with blue brackground. 我按照说明操作,并将代码粘贴到roadmap.html动画效果很好,但我不知道为什么有14枚带有蓝色底座的火箭。 You can see "glitch" Here
你可以在这里看到“故障”
Any error with js ? js有什么错误吗? Is it a problem with css?
这是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>
Thanks in advance 提前致谢
This is because of the first thing in your CSS where you said for #outerspace
: 这是因为您在CSS中首先要为
#outerspace
所说的#outerspace
:
background: #0c0440 url('http://www.the-art-of-web.com/images/rocket.gif');
The url part should not be there at all. 网址部分根本不应该存在。 If you wrote
no-repeat
, there would still be 1 rocket that shouldn't be there, so to sum it up: 如果你写了
no-repeat
,那么仍然会有一个不应该存在的火箭,所以总结一下:
Take out url('http://www.the-art-of-web.com/images/rocket.gif')
from the background
of #outerspace
. 从
#outerspace
的background
中取出url('http://www.the-art-of-web.com/images/rocket.gif')
。
The code should be: 代码应该是:
background: #0c0440;
Here is your reassurance: 这是你的保证:
#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.