js/jquery olmadan tetikleyici animasyonları tetikleme

Question

js/jquery kullanmadan anahtar kareleri animasyonunu tetiklemek için bir seçenek var mı? Düşündüm: hover, ama amacım için biraz karmaşık olurdu.

Answer 1

Böyle bir şey mi istediniz? JavaScript olmadan yapabileceğim en iyisi bu! Her ne kadar eğlenmiş olsam da.

input[type=checkbox] { 
 
    opacity: 0; 
 
} 
 

 
input[type=checkbox] + label{ 
 
    width:100px; 
 
    height:40px; 
 
    border:thin solid black; 
 
    display:block; 
 
} 
 

 
input[type=checkbox] + label:before { 
 
    content: "Run Baby!"; 
 

 
} 
 
input[type=checkbox]:checked + label:before { 
 
    content: "Come back!"; 
 
} 
 
.run { 
 
    width: 150px; 
 
    line-height: 70px; 
 
    font-size: 12px; 
 
    border: thin solid red; 
 
    transition: all 5000ms ease; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 100px; 
 
} 
 
.run:before { 
 
    content: "I wanna go right ->"; 
 
} 
 
input[type=checkbox]:checked + label + .run { 
 
    left: 400px; 
 
} 
 
input[type=checkbox]:checked + label + .run:before { 
 
    content: "Hey! Look at me go!"; 
 
}

<input id="nice" type="checkbox"> 
 
<label for="nice"> 
 
</label> 
 

 
<div class="run"></div>