js+css实现漂亮带进度的文件上传对话框弹出层代码-html代码-BFW代码库

js+css实现漂亮带进度的文件上传对话框弹出层代码

代码语言：html

所属分类：上传

代码描述：js+css实现漂亮带进度的文件上传对话框弹出层代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        * {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    :root {
        --hue: 223;
        --bg: hsl(var(--hue),10%,85%);
        --fg: hsl(var(--hue),10%,5%);
        --trans-dur: 0.3s;
        font-size: calc(16px + (20 - 16) * (100vw - 320px) / (2560 - 320));
    }
    body,
    button {
        font: 1em/1.5 Nunito, Helvetica, sans-serif;
    }
    body {
        background-color: var(--bg);
        color: var(--fg);
        height: 100vh;
        display: grid;
        place-items: center;
        transition:
                background-color var(--trans-dur),
                color var(--trans-dur);
    }
    .modal {
        background-color: hsl(var(--hue),10%,95%);
        border-radius: 1em;
        box-shadow: 0 0.75em 1em hsla(var(--hue),10%,5%,0.3);
        color: hsl(var(--hue),10%,5%);
        width: calc(100% - 3em);
        max-width: 34.5em;
        overflow: hidden;
        position: relative;
        transition:
                background-color var(--trans-dur),
                color var(--trans-dur);
    }
    .modal:before {
        background-color: hsl(223,90%,60%);
        border-radius: 50%;
        content: "";
        filter: blur(60px);
        opacity: 0.15;
        position: absolute;
        top: -8em;
        right: -15em;
        width: 25em;
        height: 25em;
        z-index: 0;
        transition: background-color var(--trans-dur);
    }
    .modal__actions {
        animation-delay: 0.2s;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .modal__body,
    .modal__header {
        position: relative;
        z-index: 1;
    }
    .modal__body {
        display: flex;
        flex-direction: column;
        padding: 0 2em 1.875em 1.875em;
    }
    .modal__button,
    .modal__close-button {
        color: currentColor;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .modal__button {
        background-color: hsla(var(--hue),10%,50%,0.2);
        border-radius: 0.25rem;
        font-size: 0.75em;
        padding: 0.5rem 2rem;
        transition:
                background-color var(--trans-dur),
                border-color var(--trans-dur),
                opacity var(--trans-dur);
        width: 100%;
    }
    .modal__button + .modal__button {
        margin-top: 0.75em;
    }
    .modal__button:disabled {
        opacity: 0.5;
    }
    .modal__button:focus,
    .modal__close-button:focus {
        outline: transparent;
    }
    .modal__button:hover,
    .modal__button:focus-visible {
        background-color: hsla(var(--hue),10%,60%,0.2);
    }
    .modal__button--upload {
        background-color: transparent;
        border: 0.125rem dashed hsla(var(--hue),10%,50%,0.4);
        flex: 1;
        padding: 0.375rem 2rem;
    }
    .modal__col + .modal__col {
        flex: 1;
        margin-top: 1.875em;
    }
    .modal__close-button,
    .modal__message,
    .modal__progress-value {
        color: hsl(var(--hue),10%,30%);
        transition: color var(--trans-dur);
    }
    .modal__close-button {
        background-color: transparent;
        display: flex;
        width: 1.5em;
        height: 1.5em;
        transition: color var(--trans-dur);
    }
    .modal__close-button:hover,
    .modal__close-button:focus-visible {
        color: hsl(var(--hue),10%,40%);
    }
    .modal__close-icon {
        display: block;
        margin: auto;
        pointer-events: none;
        width: 50%;
        height: auto;
    }
    .modal__content > * {
        /* don’t use shorthand syntax, or actions delay will be overridden */
        animation-name: fadeSlideIn;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        opacity: 0;
    }
    .modal__file {
        flex: 1;
        font-size: 0.75em;
        font-weight: 700;
        margin-right: 0.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .modal__file ~ .modal__butto.........完整代码请登录后点击上方下载按钮下载查看