汇农PC个人中心总结

1. 技巧总结

1. 使用 padding 编写灵活的 登录 | 注册, '|' 竖线, 参考: http://www.imooc.com/learn/710

    font-size: 0;
    border-left: 1px solid;
    padding: 10px 4px 2px;
    margin-left: 8px;

2. 使用过渡完成悬浮效果: 参考 http://www.mi.com/ 

transition: all .2s linear;
      &:hover {
           box-shadow: 0 15px 30px rgba(0,0,0,0.1);
           transform: translate3d(0, -2px, 0);  Y 轴向上
    }

3. 悬浮图片放大

&:hover {
    .imgs {
       img {
         transform: scale(1.1);
        }
      }
    }
   .imgs {
      img {
        transition: all .5s;
       }
 }

4. 过渡效果不能用在 display: none; 元素上, 要使用的话, 可以把 display: none; 替换成 opacity: 0; 只样的方式