Müzik ve Teknolojiyle arası iyi olan bir zat-ı muhterem.

CSS Sarsıntı Efekti Vermek
4 sene önce 1.202 okunma HTML/CSS/JS

Merhaba bloğumun sevgi ve saygıdeğer takipçileri. Bu yazımda sizlere yabancı kaynaklarda rastlamış olduğum sarsıntı efektini nasıl kullanabileceğinizi anlatacağım.

Sarsıntı efekti olarak kastettiğim şey tam olarak aşağıdaki gibidir. Resimlerde ve yazılarda kullanılan güzel bir özellik.

See the Pen “Shake” CSS snippet for CSS-Tricks by Sarah Drasner (@sdras) on CodePen.

Nasıl Kullanılır Bu ?

Nasıl kullanılacağına gelecek olursak face isminde bir div oluşturuyorsunuz ve aşağıdaki kodları stil dosyanıza ekliyorsunuz.

.face:hover {
 animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
 transform: translate3d(0, 0, 0);
 backface-visibility: hidden;
 perspective: 1000px;
}

@keyframes shake {
 10%, 90% {
 transform: translate3d(-1px, 0, 0);
 }
 
 20%, 80% {
 transform: translate3d(2px, 0, 0);
 }

 30%, 50%, 70% {
 transform: translate3d(-4px, 0, 0);
 }

 40%, 60% {
 transform: translate3d(4px, 0, 0);
 }
}

Ahali ne demiş ?

Etiketler

, , ,
Diğer Projelerim
Pc Webim Tarifimvar Rounded Image Rounded Image
   

Ben Kimim ?

Bilgi Ben Emirhan. Burası da benim kişisel mecram. Epeydir web sitesi işleriyle uğraşıyorum... Her neyse bu kadar bilgi yeter. Devamı için tam da şu yandaki butona tıkla. Devamı...
Bağlantılar: Bahis, Canlı Casino ve Poker Dersleri www.netsporhaber.com gaziantep escort ataşehir escort bedava bahis

Neler Biliyorum ?

WordPress 60% Complete
C/C++ 95% Complete
HTML 80% Complete
CSS 80% Complete

Copyright © 2014 Tüm hakları tarafımca saklanmaktadır.