Css onclickイースターエッグ

Question

私は学校のプロジェクトのために作っているウェブサイトのどこかに小さな隠されたボタンを置こうとしています。私はそのページを絶対に狂わせるようにします。私はすでにそれが狂ったようにするためのコードを持って、私はちょうど私がボタンに "バインド"する方法を知っていない。または、コナミコード、それも動作します。

CSS

body, p, h1, div { 
width: 100px; 
height: 100px; 
background-color: red; 
position: relative; 
/* Chrome, Safari, Opera */ 
-webkit-animation-name: example; 
-webkit-animation-duration: 1s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-delay: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
/* Standard syntax */ 
animation-name: example; 
animation-duration: 1s; 
animation-timing-function: linear; 
animation-delay: 2s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes example { 
0% {background-color:red; left:20%; top:20%; -webkit-transform: rotateX(180deg) rotateZ(-90deg) rotateY(360deg);} 
25% {background-color:yellow; left:80%; top:20%;-webkit-transform: rotateX(0deg) rotateZ(90deg) rotateY(0deg);} 
50% {background-color:blue; left:80%; top:80%;-webkit-transform: rotateX(180deg) rotateZ(-90deg) rotateY(0deg);} 
75% {background-color:green; left:20%; top:80%;-webkit-transform: rotateX(0deg) rotateZ(90deg) rotateY(0deg);} 
100% {background-color:red; left:20%; top:20%;-webkit-transform: rotateX(180deg) rotateZ(-90deg) rotateY(0deg);} 
} 

/* Standard syntax */ 
@keyframes example { 
0% {background-color:red; left:20%; top:20%;transform: rotateX(180deg) rotateZ(-90deg) rotateY(360deg);} 
25% {background-color:yellow; left:80%; top:20%;transform: rotateX(0deg) rotateZ(90deg) rotateY(0deg);} 
50% {background-color:blue; left:80%; top:80%;transform: rotateX(180deg) rotateZ(-90deg) rotateY(360deg);} 
75% {background-color:green; left:20%; top:80%;transform: rotateX(0deg) rotateZ(90deg) rotateY(0deg);} 
100% {background-color:red; left:20%; top:20%;transform: rotateX(180deg) rotateZ-(-90deg) rotateY(360deg);} 

Answer 1

はjQueryまたはJSでそれを試してみてください。あなたは、ページのロード時にそれ以外のアニメーションが開始されます、あなたのCSSでの具体的

http://www.w3schools.com/js/js_htmldom_css.aspあなたのボタンに

Answer 2

をonClick機能を追加することができます。私が意味することにより、これらのセレクタを使用します。

は

body.crazy, p.crazy h1.crazy ,div.crazy 

次にボタンがクリックされたときに狂ったクラスを追加します。

$('#egg').click(function(){ 
     $('body').toggleClass('crazy'); 
     $('p').toggleClass('crazy'); 
     $('h1').toggleClass('crazy'); 
     $('div').toggleClass('crazy'); 
    } 
); 

使用どんなHTMLはあなたが好き：

<button id="egg"> 
Click me 
</button> 

無料フィドル：

https://jsfiddle.net/60komy0d/2/

Answer 3

アニメーションをすべてのクラス（つまり、.example { animation styles here }）にします。

$('#myButton').on('click', function() { 
    $('body, p, h1, div').toggleClass('example'); 
} 

あなたは、CSSアニメーションhere周りに良いドキュメントを見つけることができます。そして、あなたがアニメーションを持ちたいすべての要素にクラスを追加し、クリックイベントを作成します。

クリックイベントの使用方法はquick exampleです。