Cubic bezier

Linklerin sıralanışına  bakıldığında sadece linkleri olan ve hiç bir özelliği  bulunmayan bir örneğe  benzetebilirsiniz ilk bakışta.  Aslında menü örneği demeyede bin şahit lazım. Linklerin arkaplanında  da zaten buton yok.  Yinede görüntüsü  gayet  güzel görünüyor  Css3 efektimizle birlikte.

Mouse ile linklerin üzerinde gezindiğinizde resimdede gördüğünüz  mavi, gri ve beyaz renkten oluşan çember yavaşça  büyüyüp netleşiyor. Mouseyi geri çektiğinizde ise küçülüp saydamlaşıp kayboluyor. Dilerseniz  olduğu gibi menü olarak kullanın yada sayfadaki linklerinize efekt olarak kullanın. Yazı efekti olarakta güzel bir görüntü oluşturuyor.

Microsoft bilgisayarlarda  belki  görmüşsünüzdür denetim masasından mouse ayarlarında mousenin yerini tespit etmek için buna benzer bir uyarı ayarlayabiliyorsunuz. Mouseyi kıpırdattığınızda mousenin etrafında bunun gibi sarı bir çember belirip kayboluyor.

Kullanım

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

Css : 

.cerceve {
	margin: 100px auto;
	width:900px;
}

.cerceve a {
	position: relative;
	display: inline-block;
	margin: 15px 10px;
	outline: none;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
}

.cerceve a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 2px solid rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.680, 0, 0.265, 1), opacity 1s;
	-moz-transition: -moz-transform 1s cubic-bezier(0.680, 0, 0.265, 1), opacity 1s;
	transition: transform 1s cubic-bezier(0.680, 0, 0.265, 1), opacity 1s;
	background: #d6d4d4; 
	border-radius: 50%;
	height: 14px;
	width: 14px;
	z-index: -2;
}

.cerceve a::after {
	border-width: 30px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1, 0.1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.1, 0.1);
	transform: translateX(-50%) translateY(-50%) scale(0.1, 0.1);
	height: 30px;
	width: 30px;
	position: absolute;
	margin: 0px 0 0 0px;
	opacity: 0;
	box-shadow: 0 0 1px 2px #00cae9;
}
.cerceve a:hover::after,
.cerceve a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1.2, 1.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1.2, 1.2);
	transform: translateX(-50%) translateY(-50%) scale(1.2, 1.2);
}

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

Html : 

  <div class="cerceve">
	<a href="https://www.mintik.com/">Anasayfa</a>
	<a href="https://www.mintik.com/category/photoshop/">Photoshop</a>
	<a href="https://www.mintik.com/category/webmaster/">Webmaster</a>
	<a href="https://www.mintik.com/category/wordpress/">Wordpress</a>
	<a href="https://www.mintik.com/?p=13783">Tutorial</a>
  </div>