多款自带上传进度动画的上传按钮
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'> <style> .button.dark-single { --background: none; --rectangle: #242836; --success: #4BC793; } .button.white-single { --background: none; --rectangle: #F5F9FF; --arrow: #275efe; --success: #275efe; --shadow: rgba(10, 22, 50, .1); } .button.dark { --background: #242836; --rectangle: #1C212E; --arrow: #F5F9FF; --text: #F5F9FF; --success: #2F3545; } .button { --background: #275efe; --rectangle: #184fee; --success: #4672f1; --text: #fff; --arrow: #fff; --checkmark: #fff; --shadow: rgba(10, 22, 50, .24); display: flex; overflow: hidden; text-decoration: none; -webkit-mask-image: -webkit-radial-gradient(white, black); background: var(--background); border-radius: 30px; box-shadow: 0 2px 8px -1px var(--shadow); transition: box-shadow .2s ease, -webkit-transform .2s ease; transition: transform .2s ease, box-shadow .2s ease; transition: transform .2s ease, box-shadow .2s ease, -webkit-transform .2s ease; } .button:active { -webkit-transform: scale(0.95); transform: scale(0.95); box-shadow: 0 1px 4px -1px var(--shadow); } .button ul { margin: 0; padding: 16px 32px 16px 44px; list-style: none; text-align: center; position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-size: 16px; font-weight: 500; line-height: 28px; color: var(--text); } .button ul li:not(:first-child) { top: 16px; left: 4px; right: 0; position: absolute; } .button ul li:nth-child(2) { top: 76px; } .button ul li:nth-child(3) { top: 136px; } .button > div { overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); position: relative; width: 60px; height: 60px; border-radius: 30px; background: var(--rectangle); } .button > div:before, .button > div:after { content: ''; display: block; position: absolute; } .button > div:before { border-radius: 1px; width: 2px; top: 50%; left: 50%; height: 17px; margin: -8px 0 0 -1px; background: var(--arrow); } .button > div:after { width: 60px; height: 60px; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; border-radius: 80% 80% 0 0; background: var(--success); top: 0; left: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } .button > div svg { display: block; position: absolute; width: 20px; height: 20px; left: 50%; top: 50%; margin: -12px 0 0 -10px; fill: none; z-index: 1; stroke-width: 2px; stroke: var(--arrow); stroke-linecap: round; stroke-linejoin: round; } .button.loading ul { -webkit-animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms); animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms); } .button.loading > div:before { -webkit-animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms); animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms); } .button.loading > div:after { -webkit-animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms); animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms); } .button.loading > div svg { -webkit-animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms); animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms); } @-webkit-keyframes text { 10%, 85% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 95%, 100% { -webkit-transform: translateY(-200%); transform: translateY(-200%); } } @keyframes text { 10%, 85% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 95%, 100% { -webkit-transform: translateY(-200%); transform: translateY(-200%); } } @-webkit-keyframes line { 5%, 10% { -webkit-transform: translateY(30px); transform: translateY(30px); } 40% { -webkit-transform: translateY(20px); transform: translateY(20px); } 65% { -webkit-transform: translateY(0); transform: translateY(0); } 75%, 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes line { 5%, 10% { -webkit-transform: translateY(30px); transform: translateY(30px); } 40% { -webkit-transform: translateY(20px); transform: translateY(20px); } 65% { -webkit-transform: translateY(0); transform: translateY(0); } 75%, 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-webkit-keyframes svg { 0%, 20% { stroke-dasharray: 0; stroke-dashoffset: 0; margin: -12px 0 0 -10px; } 21%, 89% { stroke-dasharray: 26px; stroke-dashoffset: 26px; stroke-width: 3px; margin: -10px 0 0 -10px; stroke: var(--checkmark); } 100% { stroke-dasharray: 26px; stroke-dashoffset: 0; margin: -10px 0 0 -10px; stroke: var(--checkmark); } 12% { opacity: 1; } 20%, 89% { opacity: 0; } 90%, 100% { opacity: 1; } } @keyframes svg { 0%, 20% { stroke-dasharray: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0