Faites tourner la Roue de code SANS javascript

Cherche à construire quelque chose de ce genre - une rotation de la roue à l'aide de seulement HTML et CSS, sans Javascript

La recherche de quelques références ou même pour voir si cela peut être fait.

HTML et CSS n'ont pas les gestionnaires d'événements, il n'existe aucun moyen pour exécuter les animations CSS sur cliquez sur.
Vous pouvez travailler hors de la :hover, :focus et :active pseudo-sélecteurs.

InformationsquelleAutor user3264603 | 2015-01-20

C'est à l'aide de l'effet Hover de la filature. Depuis le css n'a pas de gestionnaires d'événement, vous ne pouvez pas ajouter/supprimer des classes. Cependant, vous pouvez ajouter des effets de survol:

CSS:

div {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: gray;
  margin: 0 auto;
  text-align: center;
}
div:hover {
  -webkit-animation: spin 0.8s infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

HTML:

Hover to see effect: <div>Spin</div>

Si vous pouviez utiliser un minuscule peu de javascript, vous pourriez faire quelque chose comme ceci:

JS:

$('div').click(function(){
  $(this).toggleClass("thisIsAdded");
  });

CSS:

div {
      height: 100px;
      width: 100px;
      border-radius: 50%;
      background: gray;
      margin: 0 auto;
      text-align: center;
    }
    .thisIsAdded {
      -webkit-animation: spin 0.8s infinite linear;
    }
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>

Remarque:

Le script est ici purement le basculement de la classe 'thisIsAdded'.

Pas ce que je cherchais, mais apprécier la réponse. Merci!
Le "sans javascript", fait de cette question physiquement impossible. Pourrais-je vous demander pourquoi vous n'êtes pas à l'aide de javascript? La génération aléatoire de nombres il faut un script de la sorte!!
Cherchez-vous à faire quelque chose comme ceci? Si donc il vraiment besoin d' javascript!

InformationsquelleAutor jbutler483

1

Comme Justinas souligné Nous ne pouvons pas le feu de style css sur l'événement click. Vous avez besoin de javascript pour que. Cependant, vous pouvez utiliser les animations CSS pour atteindre l'effet spin, mais seulement avec des pseudo-sélecteurs.

ci-dessous est un échantillon de spin effet en utilisant uniquement CSS
```
<style type="text/css">
.content
{
    float:left;cursor:pointer;   
}
.content::after
{
    content:'>';float:right;margin:0 0 0 10px;
    -moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
    -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}

</style>
<body>
    <div class="content">Sample</div>
</body>
```
- Upvote pour une belle alternative. À mon humble avis, il semble encore moins satisfaisante que la roue tourne toujours à 90 degrés. Si c'était moi...je l'avais utiliser JS et obtenir un aléatoire de fin de rotation.
- Intéressant! Merci pour la réponse. Si seulement vous pouviez générer un nombre aléatoire en utilisant uniquement le HTML, alors vous pourriez le faire pivoter par le degré aléatoire à chaque fois.
- malheureusement html ne peut pas générer un nombre aléatoire. c'est juste un balisage. Si vous avez vraiment besoin de générer de l'aléatoire et d'appliquer des feuilles de style css, vous n'avez pas d'autre option à l'exception de javascript.
InformationsquelleAutor Umamaheswaran

Ici vous allez.. Violon

CSS:

.circle {
    border-radius: 50%;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 120px;
    height: 120px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
}
@-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); } }

Pas ce que je cherchais, mais apprécier la réponse. Merci!

InformationsquelleAutor chillvivek

Vous devez vous connecter pour publier un commentaire.