我正在学习JavaScript并尝试很多东西,但目前我的JS技能还非常有限。 我创建了一个小游戏,在游戏中有一个装着兔头的盒子,这些兔头会随机出现,用户需要尽可能快地点击它们。
所以我用一个间隔动画创建了兔子,每2秒钟兔子会闭上眼睛然后再睁开。 现在我感觉有点傻,但我无法让动画按照我想要的方式工作。现在兔子只是每2秒钟就闭上眼睛,再过2秒钟就再次睁开眼睛。然而,我希望它只是眨眼,也就是说眼睛应该只闭上一瞬间,然后再睁开,这样兔子就每2秒钟眨一次眼。 然后,我也希望它随机地有时只眨一次眼,有时眨两次眼。 不确定这是否非常简单,我只是因为编写代码和学习新东西而盯了几个小时,看起来我可能需要你的帮助。
这里是目前整个事情的fiddle。
您可以在fiddle中看到使用的完整代码。我不想在代码部分中发布整个网站,但我相信以下部分对我的动画非常有趣。
这是眨眼的js代码:
var eyeleft = document.getElementById("eyeleft");
var eyeright = document.getElementById("eyeright");
window.onload = setInterval(function() {
eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
}, 2000);
接下来是HTML
<div id="shape" class="game-shapes">
<div class="ears left"></div>
<div class="ears right"></div>
<div id="eyeleft" class="eyeleft"></div>
<div id="eyeright" class="eyeright"></div>
<div id="mouth">
<div id="tooth"></div>
<div id="tongue"></div>
</div>
</div>
现在是CSS的时候了
.game-shapes {
height: 80px;
width: 80px;
cursor: pointer;
opacity: 0;
position: relative;
transition: opacity ease-in-out .2s;
}
.game-shapes div {
position: absolute;
}
.eyeleft,
.eyeright {
background: #000;
border-radius: 50%;
width: 20px;
height: 20px;
top: 30px;
}
.eyeleft {
left: 4px;
}
.eyeright {
right: 4px;
}
.eyeleft:before,
.eyeleft:after,
.eyeright:before,
.eyeright:after {
content: '';
background: #fff;
width: 7px;
height: 7px;
top: 4px;
left: 4px;
border-radius: 50%;
position: absolute;
z-index: 5;
}
.eyeleft:after,
.eyeright:after {
width: 4px;
height: 4px;
top: 10px;
left: 10px;
}
.closedeyeleft,
.closedeyeright {
background: transparent none repeat scroll 0 0;
border-color: #000;
border-radius: 5px;
border-style: solid;
border-width: 4px 4px 0;
height: 4px;
top: 35px;
width: 12px;
}
.closedeyeleft {
left: 3px;
}
.closedeyeright {
right: 3px;
}