Mache einen Kreis mit gepunktetem Rahmen in css und Animation auf hover

Ich versuche zu animieren, eine css-Kreis. Wenn der Benutzer schwebt es, die Grenze des Kreises soll eine gepunktete Linie, und es sollte animieren, wie ein Spinnrad. Ich kann es drehen für eine bestimmte Zeit, aber ich konnte nicht einen Weg finden, animieren Sie ihn, bis der Mauszeiger auf und dann halt die animation, wenn der Mauszeiger aus dem Kreis und machen einen gepunkteten Rand.

html

<div>
</div>

css

div {
    background: red;
    border: 5px solid green;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: all 5s ease-in-out;
}

div:hover {
     transform:rotate(180deg);
     border: 5px dotted blue;
}

jsfiddle -> http://jsfiddle.net/uYBKQ/1/

  • Sie müssen CSS-Animationen. CSS transitions nicht Schleife.
  • Wie erstelle ich eine gepunktete Linie? könnten Sie mir helfen 🙂
  • Ich nehme an, du verwendest Firefox stackoverflow.com/questions/3718215/...
  • border: 5px dotted green; geben Sie die gepunktete Linie
  • nicht im Firefox, wie ich schon sagte
  • So wissen Sie, urdu?
  • ja, ich verwende firefox
  • was ist urdu???
  • Die syntax ist korrekt für Firefox, aber wie es aussieht funktioniert es nicht auf den abgerundeten Teil der Grenze (in firefox).
  • Und ich habe gerade etwas gelernt 🙂
  • fwiw, gibt es einen offenen bug dazu: bugzilla.mozilla.org/show_bug.cgi?id=382721

Schreibe einen Kommentar