hoverで残像が残る心地いいアニメーション ~hover fading navigation bar~

PR

hover fading navigation bar

See the Pen hover fading navigation bar by Em Weisiger (@emweisiger) on CodePen.

http://codepen.io/emweisiger/pen/GJalk

マウスポインターを乗せると背景が変化し、離すとアニメーションしながら消えていくhoverを使ったアニメーションです。
これは簡単に実装することが出来ます

 

li a{
 display: block;
 width: 196px;
 padding: 3px 4px;
 margin: 5px 13px;
 color: #969E8D;
 border-bottom: 1px solid #96BF1F;
 -moz-transition: background-color .3s ease-in;
 -webkit-transition: background-color .3s ease-in;
 -o-transition: background-color .3s ease-in;
 transition: background-color .3s ease-in;
}
 
li a:hover{
 background-color: #96C11F;
 color: #fff;
 -moz-transition: background-color 0.01s;
 -webkit-transition: background-color 0.01s;
 -o-transition: background-color 0.01s;
 transition: background-color 0.01s;
}

色やサイズは好きなモノにするとして、 aa:hover transition をそれぞれ付けてやるだけです
transition のところをコピペして、やるだけでOKです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー