Question

我目前正在尝试添加Konami代码，该代码会在我的（非常简单的）页面上旋转div。

这是我的代码：

<html>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>     
<html>
<script>
var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
n = 0;  
$(document).keydown(function (e) {  
    if (e.keyCode === k[n++]) {  
        if (n === k.length) {  
            alert('Konami working');
            return !1  
        }  
    } else k = 0  
});
</script>
<style>
#div1
{
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
<div id="div1"><iframe frameborder="0" width="100%" height="100%" align="middle" src="//www.youtube.com/embed/_RJHLB3cBXU?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&iv_load_policy=3&playlist=_RJHLB3cBXU"></iframe></div>
</html>

正如您所看到的，当输入正确的代码时，它只是触发凌乱的CSS汤中指定的动画（效果很好）。我有点绝望，有人会有想法吗？

Answer 1

我想我会在这里得到你想要的东西，只是尝试在事件发生时添加一个包含动画的类。我不能100％确定下面的内容是否可行，因为我对关键帧不是很熟悉，但这个概念应该成立并允许你找到答案。

$(document).keydown(function (e) {  
    if (e.keyCode === k[n++]) {  
        if (n === k.length) {  
            alert('Konami working');
            $('#div1').addClass('spinIt'); // <- Add this
            return !1  
        }  
    } else k = 0  
});

CSS：

<style>
    #div1
    {
        position: absolute; 
        top: 0%; 
        left: 0%; 
        width: 100%; 
        height: 100%;

    }
    // Add this class with the animation css and remove it from the above div1.
    .spinIt{
       -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    }


</style>

使用Javascript触发基本的CSS动画

1 个答案: