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 {
    	opacit.........完整代码请登录后点击上方下载按钮下载查看