带文件添加复合按钮的迷你标签栏

Add file tab bar animation，点击文件夹图标时，文件夹会展开并弹出显示文件类型的圆弧状子菜单按钮。

h5,svg,menu,bar

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2344
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.fileAdd {
    width: 32px;
    height: 24px;
    background: #5628EE;
    border-radius: 0 3px 3px 3px;
    position: relative;
    margin: 2px 0 0 0;
    -webkit-perspective: 160px;
    perspective: 160px;
    cursor: pointer;
}
.fileAdd:before {
    content: '';
    border-radius: 2px 2px 0 0;
    background: inherit;
    height: 2px;
    width: 20px;
    display: block;
    position: absolute;
    top: -2px;
    left: 0;
}
.fileAdd div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    background: #8C6FF0;
    border-radius: 2px 2px 3px 3px;
    z-index: 2;
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.fileAdd div span {
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0 0 -5px;
    transition: -webkit-transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.4);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.4);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.4), -webkit-transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.4);
}
.fileAdd div span:before,
.fileAdd div span:after {
    content: '';
    height: 10px;
    width: 2px;
    border-radius: 1px;
    background: #fff;
    display: block;
    position: absolute;
    left: 4px;
    top: 0;
}
.fileAdd div span:before {
    -webkit-transform: scaleX(0.75);
    transform: scaleX(0.75);
}
.fileAdd div span:after {
    -webkit-transform: scaleY(0.75) rotate(90deg);
    transform: scaleY(0.75) rotate(90deg);
}
.fileAdd ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-perspective: 300px;
    perspective: 300px;
}
.fileAdd ul li {
    --translateY: 0;
    --translateX: 0;
    --scale: .92;
    bottom: 0;
    left: 6px;
    position: absolute;
    width: 20px;
    height: 26px;
    transition: -webkit-transform .45s ease;
    transition: transform .45s ease;
    transition: transform .45s ease, -webkit-transform .45s ease;
    -webkit-transform: translateY(var(--translateY)) translateX(var(--translateX)) scaleX(var(--scale));
    transform: translateY(var(--translateY)) translateX(var(--translateX)) scaleX(var(--scale));
}
.fileAdd ul li:before,
.fileAdd ul li:after {
    --rotateY: 0deg;
    --rotateZ: 90deg;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
    -webkit-transform: rotateY(var(--rotateY)) rotateZ(var(--rotateZ));
    transform: rotateY(var(--rotateY)) rotateZ(var(--rotateZ));
}
.fileAdd ul li:after {
    --rotateY: -180deg;
    z-index: 1;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 26px;
    font-family: 'Mukta Malar';
}
.fileAdd ul li.word:before {
    background: #8969f3;
}
.fileAdd ul li.word:after {
    background: #DAEDFE;
    color: #46A7FE;
    content: 'W';
}
.fileAdd ul li.powerpoint {
    --translateY: 1px;
    --scale: .96;
}
.fileAdd ul li.powerpoint:before {
    background: #bba9f8;
}
.fileAdd ul li.powerpoint:after {
    background: #FDE5E1;
    color: #F57F65;
    content: 'P';
}
.fileAdd ul li.excel {
    --translateY: 2px;
    --scale: 1;
}
.fileAdd ul li.excel:before {
    background: #fff;
}
.fileAdd ul li.excel:after {
    background: #D4F5DF;
    color: #2ACF62;
    content: 'E';
}
.fileAdd:hover div {
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
}
.fileAdd:active span {
    -webkit-transform: scale(0.84);
    transform: scale(0.84);
}
.fileAdd.open div {
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
}
.fileAdd.open div span {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.fileAdd.open:active span {
    -webkit-transform: scale(0.84) rotateZ(45deg);
    transform: scale(0.84) rotateZ(45deg);
}
.fileAdd.open ul li {
    --scale: 1;
}
.fileAdd.open ul li:before {
    --rotateY: 180deg;
    --rotateZ: 0deg;
}
.fileAdd.open ul li:after {
    --rotateY: 0deg;
    --rotateZ: 0deg;
}
.fileAdd.open ul li.word {
    --translateY: -32px;
    --translateX: -36px;
}
.fileAdd.open ul li.word:hover {
    --translateY: -30px;
}
.fileAdd.open ul li.powerpoint {
    --translateY: -44px;
    --translateX: 0px;
}
.fileAdd.open ul li.powerpoint:hover {
    --translateY: -42px;
}
.fileAdd.open ul li.excel {
    --translateY: -32px;
    --translateX: 36px;
}
.fileAdd.open ul li.excel:hover {
    --translateY: -30px;
}
.tabbar {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
.tabbar > li {
    margin: 0 11px;
}
.tabbar > li > svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: #2F3545;
    transition: opacity .3s ease;
}
.tabbar.open > li > svg {
    opacity: .5;
}
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    background: #171C28;
    display: flex;
    justify-content: center;
    align-items: center;
}
body .dribbble {
    position: fixed;
    display: block;
    right: 20px;
    bottom: 20px;
}
body .dribbble img {
    display: block;
    height: 28px;
}

HTML

Add file tab bar animation，点击文件夹图标时，文件夹会展开并弹出显示文件类型的圆弧状子菜单按钮。

h5,svg,menu,bar

编辑器支持Emmet

快捷键

Add file tab bar animation，点击文件夹图标时，文件夹会展开并弹出显示文件类型的圆弧状子菜单按钮。

h5,svg,menu,bar

使用网页组件(webcomponents)实现的标题文本撒花动画特效

HTML5 CSS3一组很棒的带晃动动画特效的单选按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：