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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie die CSS-Animationen.
In deinen HTML-code, legen Sie die Folgen Klasse:
Und in der CSS-Datei, fügen Sie diese Regeln (dieses Beispiel ist nur für webkit):
Hier ein DEMO
Cheers, Leo
Wenn Sie möchten, funktioniert in Firefox, fügen Sie einfach die jeweiligen vendor-Präfixe.
Ich gespaltener Ihre Geige hier: http://jsfiddle.net/vHRat/3/
Hier ist die aktualisierte CSS:
Auch für das, was Ihren Wert, wenn Sie den border-radius auf 0, können Sie deutlich sehen, die rotation. Die Grenze erscheint als solide und der Kreis wird statisch durch die rotation.