Back

非常不错的纯CSS菜单效果( css menu effects )

发布时间: 2014-10-05 00:11:00

github: http://ianlunn.github.io/Hover/

watch: 4781 

用法非常简单:

1. 下载 http://ianlunn.github.io/Hover/css/hover.css

2. 找到对应的效果(例如 grow) ,然后复制过来:

/* Grow */

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

3. add 'grow' to your div's class: 

<a class="button grow">Add to Basket</a>

Back