Yin Yang wie CSS mit leerem Zentrum

ich diesen Lader habe hier: https://jsfiddle.net/guanzo/hdn3wqmd/2/Yin Yang wie CSS mit leerem Zentrum

Ich versuche es wie dieses

kann ich bin mir nicht sicher schauen, um diese mit getan werden Grenzen allein, habe ich eine Reihe von Variationen der Breite/Radius usw. versucht, aber es kommt nie richtig.

.loader { 
    border-top: 40px solid #3498db; /* Blue */ 
    border-bottom: 40px solid darkblue; /* Blue */ 
    border-radius: 50%; 
    width: 300px; 
    height: 300px; 
}

EDIT: Ich frage nicht darüber, es Spin zu machen. Ich frage, wie ich mein bereitgestelltes Bild oben mit CSS erstellen kann. Sie werden feststellen, dass die Form eines Yin Yangs einen Kreis ausfüllt. Meine Wunschform nicht und hat eine leere Mitte.

Quelle

2017-01-24 Eric Guan

Diese Hilfe versuchen? https://jsfiddle.net/user2314737/EGQab/ –

Mögliches Duplikat von [CSS3 Animation drehen] (http://stackoverflow.com/questions/16771225/css3-rotate-animation) –

@Michael, nicht genau. Ich suche kein Yin Yang, mein Beispiel hat eine leere Mitte. Nick, das ist nicht meine Frage. –

Ist es in Ordnung ..

* { 
 
    box-sizing:border-box; 
 

 
} 
 
div{ 
 
    
 
display:inline-block; 
 
} 
 
.loader { 
 
    border-top: 40px solid #3498db; /* Blue */ 
 
    border-bottom: 40px solid darkblue; /* Blue */ 
 
    border-radius:75% 25% 75%; 
 
    width: 200px; 
 
    height: 200px; 
 
    transform: rotate(35deg); 
 
    margin-left:25%; 
 
}

<div class="wrap"> 
 
<div class="loader"></div> 
 
</div>

Oder Sie können einige weitere Anpassungen hier

Quelle

2017-01-24 05:33:22

Yin Yang wie CSS mit leerem Zentrum

Antwort

Verwandte Themen