Daha önce ki makalemizde Css kullanarak animasyonlu olarak sosyal medya ikonlarının nasıl yapıldığını anlatmaya çalışmıştım.

Bu makalemizde de önceki makalemizde anlattığımız animasyondan farklı olarak, yine Css kullanarak  3  ayrı şekilde hazırlanmış animasyonlu sosyal medya ikonlarının nasıl yapıldığını anlatmaya çalışacağım.

Birinci örneğimizde; köşeleri yuvarlatılmış her buton background rengini almış şekilde iken, fare ile üzerine gelindiğinde buton tamamen çember haline dönüşürken kendi ekseni etrafında da 360 derece dönme animasyonunu gerçekleştirecektir.

İkinci örneğimizde de; tamamen daire şeklinde ki her buton beyaz bir background rengi ve kendi orijinal background renginde border ile oluşmuş iken, fare ile üzerine gelindiğinde bu sefer beyaz olan background rengi butonun kendi orijinal rengine dönerken 360 derece de kendi ekseninde dönen bir animasyonu oluşturacaktır.

Üçüncü ve son örneğimizde ise; birinci örneğimizde ki gibi köşeleri yuvarlatılmış ve her buton kendi background renginde iken fare ile üzerine gelindiğinde, birinci örneğimizden farklı olarak her buton kendi background renginde bir border ile, zemin rengi ise beyaz olarak ve çember şeklinde kendi ekseni etrafında 360 derece dönen bir animasyonu oluşturacaktır.

 





Anlatımı görsel olarak aşağıdaki videodan veya youtube sayfasından takip edebilirsiniz.