-
- 23568 2018-03-06
- .toolbar-btn { &, &:before, &:after { width: $toolbar-size; height: $toolbar-size; position: absolute; left: 0; } &:before, &:after { content: ""; color: #fff; text-align: center; @include transition(top 1s); } top: 0; overflow: hidden; @extend [class^="icon-"]; &:before { // icon top: 0; background-color: #d0d6d9; font-size: 30px; line-height: $toolbar-size; } &:after { // text top: $toolbar-size; background-color: #98a1a6; font-size: 12px; line-height: 1.2; padding-top: 12px; white-space: pre; /* 为了实现换行 */ } }
- 0赞 · 0采集
-
- 23568 2018-03-06
- .toolbar-item-weixin { &:after { content: ""; height: 212px; background-position: 0 0; } .toolbar-btn { @extend .icon-wechat; &:after { content: "官方\A微信"; } } } .toolbar-item-feedback { &:after { content: ""; height: 194px; background-position: 0 -222px; } .toolbar-btn { @extend .icon-chat; &:after { content: "意见\A反馈"; } } } .toolbar-item-app { .toolbar-btn { @extend .icon-mobile2; &:after { content: "APP\A下载"; } } } .toolbar-item-top { .toolbar-btn { @extend .icon-ctrl; &:after { content: "返回\A顶部"; } } }
- 0赞 · 0采集
-
- 23568 2018-03-06
- $toolbar-size: 52px; .toolbar { position: fixed; left: 50%; bottom: 5px; margin-left: -$toolbar-size / 2; } .toolbar-item { position: relative; display: block; width: $toolbar-size; height: $toolbar-size; margin-top: 1px; &:hover { .toolbar-btn { &:before { top: -$toolbar-size; } &:after { top: 0; } } &:after { @include opacity(1); @include scale(1); } } &:after { content: ""; position: absolute; right: $toolbar-size - 6; bottom: -10px; width: 172px; background-image: url(img/toolbar_img.png); background-repeat: no-repeat; @include opacity(0); @include transform-origin(95% 95%); @include scale(0.01); @include transition(all 1s); } }
- 0赞 · 0采集
-
- fengyunzhu 2017-07-18
- @extend
-
截图0赞 · 0采集
-
- 悟酱起飞 2016-03-28
- Sass使继承样式：@extend XXX (XXX为样式名，前面有.或#照加)，这样就继承了被继承样式的所有样式了。
- 0赞 · 0采集
-
- haleywang_com 2015-09-08
- 群组的写法
-
截图0赞 · 0采集
-
- haleywang_com 2015-09-08
- @extend
-
截图0赞 · 0采集
-
- 水月锦华 2015-08-29
- 继承 @extend
-
截图0赞 · 0采集
-
- kongkx 2015-07-13
- @extend
- 0赞 · 0采集
数据加载中...