svg+TweenMax实现简洁多文件带进度上传ui效果代码
代码语言:html
所属分类:上传
代码描述:svg+TweenMax实现简洁多文件带进度上传ui效果代码
代码标签: svg TweenMax 简洁 多文件 进度 上传 ui
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; background-color: #f3f6fa; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-synthesis: none; -moz-font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page { display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; } .upload-container { width: 360px; height: 480px; border-radius: 16px; background-color: white; box-shadow: -70px 90px 102px #e2e7ed; } .nav-container { display: flex; align-items: center; justify-content: space-between; padding: 36px 24px 20px; border-bottom: 1px solid #f3f6fa; } .nav-h { font-style: normal; font-weight: 700; font-size: 32px; line-height: 44px; color: #2e3640; } #refresh-all { width: 24px; height: 24px; cursor: pointer; stroke: #e1e6ed; opacity: 0; pointer-events: none; transition: all 0.6s cubic-bezier(0.19, 1, 0.1, 1.2); } #refresh-all:hover { stroke: #a5afbc; } .refresh1.refresh2.refresh3 { opacity: 1 !important; pointer-events: auto !important; transform: rotate(-360deg); transition: all 0.6s cubic-bezier(0.19, 1, 0.1, 1.2); } .upload-items { height: 72px; padding: 0 24px 0 24px; display: flex; align-items: center; overflow: hidden; position: relative; opacity: 0; margin-top: 4px; transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .upload-inf-container { display: flex; flex-direction: column; width: calc(100% - 66px); margin-left: 20px; } .upload-inf-icon { width: 46px; height: 46px; } .upload-operation-container { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px 0; } .upload-inf-h { font-weight: 500; font-size: 16px; color: #2e3640; letter-spacing: 0.03em; } .upload-operation { display: flex; } .upload { position: relative; min-height: 300px; } .upload-operation-icon { width: 24px; height: 24px; margin-left: 19px; cursor: pointer; stroke: #e1e6ed; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; position: relative; transition: stroke 0.3s; } .upload-operation-icon:hover { stroke: #b6c0cd !important; } .upload-operation-icon-mouse-transition { transition: all 1s cubic-bezier(0.19, 1, 0.1, 1) !important; } .upload-operation-icon-mouse { transform: scale(0.8) !important; } .paused-path { transition: stroke-dasharray, stroke-dashoffset 0.2s cubic-bezier(0.19, 0.6, 0.1, 1); } .paused-line { stroke-dasharray: 17; stroke-dashoffset: 11; transition: stroke-dasharray, stroke-dashoffset 0.8s cubic-bezier(0.19, 1, 0.1, 1.2); } .upload-progress-container { display: flex; align-items: center; justify-content: space-between; } .upload-progress-text-container { color: #3268f1; font-size: 14px; font-weight: 700; } .upload-progress { width: calc(100% - 50px); height: 3px; background-color: #eff3f9; border-radius: 4px; } .progress { width: 0px; height: 3px; background-color: #3268f1; border-radius: 4px; } .upload-complete-text { color: #52d990; transition: color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .upload-complete-progress { background-color: #52d990; transition: background-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } #upload-icon-com { opacity: 0; } #dribbble-button { display: flex; justify-content: center; align-items: center; color: white; background-color: #d85888; border: none; font-size: 18px; padding: 12px 24px; font-weight: 600; margin-top: 40px; border-radius: 6px; border-bottom: 4px solid #edc3d2; z-index: 1; cursor: pointer; } #dribbble-icon { margin-right: 6px; } .blank { width: 160px; } .blank-container { position: absolute; top: 10%; margin: 0 auto; width: 260px; display: flex; pointer-events: none; opacity: 0; flex-direction: column; align-items: center; height: auto; bottom: 0; left: 0; right: 0; text-align: center; font-weight: 700; color: #acb2bb; transition: all 0.2s; opacity: 0; } .blank-ill { width: 160px; display: block; margin-bottom: 12px; } .blank1.blank2.blank3 { opacity: 1; } .black-arrow { right: -12px; width: 56px; top: -25px; position: absolute; } .dc-logo { width: 24px; height: auto; } .dc-logo-item { display: flex; align-items: center; margin-top: 40px; } .dc-logo-text { font-size: 16px; font-weight: 700; color: #1f1f1f; margin-left: 12px; } </style> </head> <body > <section class="page"> <div class="upload-container"> <div class="nav-container"> <div class="nav-h">Upload</div> <svg id="refresh-all" class="" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0)"> <path class="path" d="M9.22625 27.4134C15.2749 30.9056 23.0092 28.8331 26.5014 22.7845C29.9936 16.7359 27.9212 9.00151 21.8726 5.50933C15.8239 2.01715 8.08957 4.08956 4.59739 10.1382M4.59739 10.1382L4.20611 4.07121M4.59739 10.1382L11.0859 9.01678" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> </g> <defs> <clipPath id="clip0"> <rect width="32" height="32" fill="white" /> </clipPath> </defs> </svg> </div> <div class="upload"> <div id="upload-items" class="upload-items"> <img class="upload-inf-icon" src="//repo.bfw.wiki/bfwrepo/image/5fb88f82db597.png" alt=""> <div class="upload-inf-container"> <div class="upload-operation-container"> <div class="upload-inf-h">My first shote</div> <div class="upload-operation"> <svg id="upload-pause" class="upload-pause upload-operation-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle class="path" cx="15" cy="15" r="11.5" /> <path id="paused-path" class="paused-path path" d="M13 12L18 15L13 18" /> <path id="paused-line" class="paused-line path" d="M13 12L13 15L13 18L24 18" /> </svg> <svg id="upload-delete" class="upload-pause upload-operation-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle class="path" cx="15" cy="15" r="11.5" /> <path class="path" d="M11 11L19 19" /> <path class="path" d="M19 11L11 19" /> </svg> </div> </div> <div class="upload-progress-container"> <div class="upload-progress"> <div id="progress" class="progress"></div> </div> <span id="progress-text-container" class="upload-progress-text-container"> <span id="progress-number">0</span> <span id="progress-symbol">%</span> </span> </div> </div> </div> <div id="upload-items2" class="upload-items"> <img class="upload-inf-icon" src="//repo.bfw.wiki/bfwrepo/image/5fb88f82db597.png" alt=""> <div class="upload-inf-container"> <div class="upload-operation-container"> <div class="upload-inf-h">My first pen</div> <div class="upload-operation"> <svg id="upload-pause2" class="upload-pause upload-operation-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="15" cy="15" r="11.5" /> <path id="paused-path2" class="paused-path" d="M13 12L18 15L13 18" /> <path id="paused-line2" class="paused-line" d="M13 12L13 15L13 18L24 18" /> </svg> <svg id="upload-delete2" class="upload-operation-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="15" cy="15" r="11.5" /> <path d="M11 11L19 19" /> <path d="M19 11L11 19" /> </svg> </div> </div> <div class="upload-progress-container"> <div class="upload-progress"> <div id="progress2" class="progress"></div> </div> <span id="progress-text-container2" class="upload-progress-text-container"> <span id="progress-number2">0</span> <span id="progress-symbol">%</span> </span> </div> </div> </div> <div id="upload-items3" class="upload-items"> <img class="upload-inf-icon" src="//repo.bfw.wiki/bfwrepo/image/5fb88f82db597.png" alt=""> <div class="upload-inf-container"> <div id="progress-text-container2" class="upload-operation-container"> <div class="upload-inf-h">My infomation</div> <div class="upload-operation"> <svg id="upload-pause3" class="upload-pause upload-operation-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="15" cy="15" r="11.5" /> <path id="paused-path3" class="paused-path" d="M13 12L18 15L13 18" /> <path id="paused-line3" class="paused-line" d="M13 12L13 15L13 18L24 18" /> </svg> <svg id="upload-delete3" class="upload-operation-icon" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="15" cy="15" r="11.5" /> <path d="M11 11L19 19" /> <path d="M19 11L11 19" /> </svg> </div> </div> <div class="upload-progress-container"> <div class="upload-progress"> <div id="progress3" class="progress"></div> </div> <span id="progress-text-container3" class="upload-progress-text-container"> <span id="progress-number3">0</span> <span id="progress-symbol">%</span> </span> </div> </div> </div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0