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; 只样的方式