文件上传抽屉拉开动画

Upload Files Animation

file, upload

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
i,
select {
    margin: 0;
    padding: 0;
}
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.03);
}
.container {
    -webkit-transition: all 600ms cubic-bezier(0.81, -0.12, 0.64, 0.99);
    transition: all 600ms cubic-bezier(0.81, -0.12, 0.64, 0.99);
}
.main-box {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 400px;
    height: 60px;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding: 40px;
    -webkit-transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
    transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.box-content {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    /* flex-direction: row; */
    /* flex-wrap: nowrap; */
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.box-content .text {
    position: relative;
    left: -68px;
    margin-left: 32px;
}
.text .title {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    font-size: 24px;
    color: #4F4F4F;
}
.text span {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-size: 20px;
    color: #4F4F4F;
}
.dots div {
    width: 6px;
    height: 6px;
    background: #4F8AFE;
    margin: 3px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.blue-bg {
    display: none;
    position: absolute;
    right: 400px;
    z-index: 1;
    width: 162.35px;
    height: 140px;
    background: #4F8AFE;
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
    border-radius: 0 24px 24px 0;
    -webkit-border-radius: 0 24px 24px 0;
    -moz-border-radius: 0 24px 24px 0;
    -ms-border-radius: 0 24px 24px 0;
    -o-border-radius: 0 24px 24px 0;
}
.box-content::after {
    content: '';
    /*display: none;
    */
    
    opacity: 0;
    position: absolute;
    right: -60px;
    z-index: -1;
    width: 300px;
    height: 140px;
    background: #4F8AFE;
    border-radius: 0 24px 24px 0;
    -webkit-border-radius: 0 24px 24px 0;
    -moz-border-radius: 0 24px 24px 0;
    -ms-border-radius: 0 24px 24px 0;
    -o-border-radius: 0 24px 24px 0;
    -webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
    transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.main-box:hover .box-content::after {
    opacity: 1;
    position: absolute;
    z-index: -1;
    -webkit-transform: translateX(120px);
    transform: translateX(120px);
}
.box-content::before {
    content: '';
    opacity: 0;
    position: absolute;
    right: -60px;
    /* z-index:1; */
    
    width: 162px;
    height: 140px;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTIiIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA5MiA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3Ljc2ODkgNTZINzMuNzcyM0M4My41ODYyIDU2IDkxLjU0NDggNDguMDQxMyA5MS41NDQ4IDM4LjIyNzZDOTEuNTQ0OCAyOS40NzM4IDg1LjIxNjQgMjIuMjE4MSA3Ni44ODQgMjAuNzQ0Qzc0LjYzMTMgMTQuMTQyNSA2OC4zOTEzIDkuMzg4MDcgNjEuMDI2NiA5LjM4ODA3QzU4LjQwMDUgOS4zODgwNyA1NS45MjcgMTAuMDEwNSA1My43MTQ0IDExLjA4NjZDNTAuMzEzMyA0LjUwNTI1IDQzLjQ1ODggMCAzNS41NDQyIDBDMjQuMjQ4OSAwIDE1LjA4OTggOS4xNTkzNSAxNS4wODk4IDIwLjQ1NDRDMTUuMDg5OCAyMC41MzA3IDE1LjEwMTggMjAuNjAzIDE1LjEwMTggMjAuNjc5M0M2LjU1Njg3IDIxLjk3MjIgNi4wNzE3OGUtMDYgMjkuMzI0NiA2LjA3MTc4ZS0wNiAzOC4yMzA3Qy0wLjAwODAyNDM3IDQ4LjA0NDUgNy45NTA2OCA1NS45OTkgMTcuNzY4MyA1NS45OTlMMTcuNzY4OSA1NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMjk0MjUgMC4yNDAzODcpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
    background-repeat: no-repeat;
    background-position: 45px center;
    -webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
    transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.main-box:hover .box-content::before {
    opacity: 1;
    position: absolute;
    /* z-index: 1; */
    
    -webkit-transform: translateX(120px) scale(.7);
    transform: translateX(120px) scale(.7);
}
.dots div {
    -webkit-transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
    transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
}
.main-box:hover .dots div:nth-child(1) {
    -webkit-transform: translateY(9px);
    transform: translateY(9px);
    /* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.main-box:hover .dots div:nth-child(2) {
    -webkit-transform: scale(3);
    transform: scale(3);
    /* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.main-box:hover .dots div:nth-child(3) {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px);
    /* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.container:hover {
    /* z-index: 2; */
    
    -webkit-transform: translateX(-75px);
    transform: translateX(-75px);
}
.dr {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 100px;
}

HTML

<div class="container">
    <div class="main-box">
        <div class="box-content">
            <div class="svg">
                <svg width="66" height="57" viewBox="0 0 66 57" fill="none" xmlns="https://www.w3.org/2000/svg">
                    <path d="M2.70977 0H19.4194C20.2733 0 21.0742 0.402215 21.5857 1.08315L25.3821 6.14266C25.8937 6.82361 26.6946 7.22581 27.5484 7.22581H62.3226C63.8185 7.22581 65.0323 8.43956 65.0323 9.93548V53.2903C65.0323 54.7862 63.8185 56 62.3226 56H2.70968C1.21376 56 0 54.7862 0 53.2903V2.70968C0 1.21375 1.21385 0 2.70977 0Z"
                    transform="translate(0.0177612 0.740387)" fill="#4F8AFE" />
                </svg>
            </div>
            <div class="text">
                <p class="title">Files for Jobs </p>
                <span>Modified: Today</span>
            </div>
            <div class="dots">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

</div>

Upload Files Animation

file, upload

编辑器支持Emmet

快捷键

Upload Files Animation

file, upload

HTML5 CSS3带上传列表和进度动画的多文件上传控件

jQuery Dropzone.js 可拖拉文件异步上传控件（可限制文件类型）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：