Categoria:

Animazione Yin e Yang con CSS

11/01/2014 21:49 Pubblicato da
Share on FacebookTweet about this on TwitterGoogle+Share on Reddit


Yin-and-yang animation in CSS3 (No JavaScript)

Il concetto di yin (/jin/) e yang (/jang/) ha origine dall’antica filosofia cinese, molto probabilmente dall’osservazione del giorno che si tramuta in notte e della notte che si tramuta in giorno o dalle osservazioni e riflessioni che Lao-Tsu faceva nei confronti del fuoco, notandone il colore, il calore, la luce e la propensione della fiamma di svilupparsi verso l’alto. Da qui tutta la classificazione in “yin” e “yang” anche di ogni fenomeno naturale (es. il fuoco è caldo, emette luce, sale verso il cielo quindi yang). Questa è una concezione presente nelle due religioni propriamente cinesi: Taoismo e Confucianesimo. (Wikipedia)

Demo Download

In questo articolo mostrerò come creare il cosiddetto Taijitu, ovvero la rappresentazione di Yin e yang utilizzando solo CSS.
Innanzitutto definiamo il contenuto del file HTML. La classe circle, come si vedrà dopo, servirà solo per centrare l’animazione.

La classe .circle ha un’altezza e una larghezza pari a 220px. Il margin: auto permette di centrare l’elemento.

E’ necessario creare una circonferenza suddivisa in due parti. Per ottenere ciò useremo la proprietà border per definire la tipologia e il colore del bordo della circonferenza, la proprietà border-width per specificare le dimensioni del bordo (border-width: top vertical bottom;) ed infine il border-radius per arrotondare la figura del 50%. Quindi, metà della circonferenza sarà composta da un bordo molto ampio di colore nero, mentre l’altra metà avrà un bordo scuro più sottile e uno sfondo bianco.
.yin-yang è associata ad un’animazione (yin-yang-anim).
1s

Sfruttando la pseudo-classe :before creeremo una circonferenza avente un bordo di colore scuro e un cerchio interno di colore bianco.
2s

Molto simile alla pseudo-classe precedente. Si tratta del cerchio bianco.
3s

L’animazione ruota l’elemento di 360°.

Demo Download

21/07/2017 10:14

Leave a Reply

Your email address will not be published. Required fields are marked *