Circle animation

0
352
views

colorful

Bir ara  buna benzer bir  örneğe rastlamıştım. Butonların çerçeveleri dört köşe ve mouse ile  gri  renkli butonların üzerinden gezdirdiğimde her  buton için farklı renkler atandığını görmüştüm. Baya bi güzel görünüyordu. Ordan aklıma geldide ona benzer bir tane yapmak istedim. Benimkinin renkleri biraz ciyak çıkmış. butonların çerçeveleri  yuvarlak  hover efekti sonrası arkaplan rengi  gökkuşağı renginde ve bütün butonların hover (mouse  üzerinde gezdirme) sonrası rengi  aynı. İsterseniz  bütün butonlara  aynı renk kullanın yada kendinize özgü renkler  ekleyin.

Tasarımı esnektir ve  butonlar üst üste binse dahi butonların yerleri kaymaz. Ayrıca mouseyi butonların üzerinden gezdirdiğinizde butonlar biraz büyüyor. Bu sırada hiç bir buton yerinden oynamıyor. İsterseniz zoom oranını  daha da arttırabilirsiniz. Bu işlem sırasında (hover efekti esnasında) beyaz renkli ikonlar siyah rengine  dönüyor.

Daire şeklinde ıkan örneğimizde  WeLoveIcon kullandım.  İstediğim ikon çeşitleri  tek  grupta olmadığı için mecburen iki adet  grup  kullandım. Bu ikon gruplarından birtanesi fontawesome diğeri de zocial.  WeLoveIcon sitesinden daha fazla ikon seçeneğine ulaşabilirsiniz. Rastgele  karşıma çıkan ikonlar  seçip ekledim. Kendi  site içeriğinize ve kategorilerinize  uygun ikonları kendiniz  uyarlayabilirsiniz.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Bu kısım tek  bir parça  aslında ama dikkatinizi  çekmek için import edilen WeLoveIcon fontlarını  ayrı  ve diğer  kodu ayrı ekliyorum. Her iki parçayı da stil dosyasına  ekleyip kullanabilirsiniz.

Font :

 

Css :

 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

 

Aranan kelimeler:

  • yuvarlak resimli menü kodları
1 oy (2 votes, average: 4,50 out of 5)
Loading...
Önceki İçerikOrange horizontal
Sonraki İçerikPureCss accordion gallery
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here