-
.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; /* 为了实现换行 */ } }查看全部
-
.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顶部"; } } }查看全部
-
$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); } }查看全部
-
注意:在:before,或:after中的content里面如果有文字需要换行显示,只需要在其内容部分加上\A即可。 :after{ content:"文字\A部分"; }查看全部
-
侧边栏工具条html结构查看全部
-
css包装查看全部
-
框架实现查看全部
-
框架思想查看全部
-
既然有相同的设置,除了群组选择器 是否可以把宽和高顶一个函数,然后直接引用函数呢?查看全部
-
https://icomoon.io/app/#/select查看全部
-
位置, 下到上 透明度,透明到不透明!查看全部
-
Sass requireJS CSS3 animation查看全部
-
使用define将每一个功能定义成模块查看全部
-
侧边栏查看全部
-
$.proxy(需要调用的方法,this指向的Obj)查看全部
举报
0/150
提交
取消