js+css实现按钮点击下载进度动画效果代码-html代码-BFW代码库

js+css实现按钮点击下载进度动画效果代码

代码语言：html

代码描述：js+css实现按钮点击下载进度动画效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind&amp;display=swap'>
    <style>
        * {
    	border:0;
    	box-sizing:border-box;
    	margin:0;
    	padding:0
    }
    :root {
    	--dur:3s;
    	--arrowA:polygon(33% 0,67% 0,67% 60%,100% 60%,50% 100%,0% 60%,33% 60%);
    	--arrowB:polygon(0% 37.5%,100% 37.5%,100% 62.5%,100% 62.5%,50% 62.5%,0% 62.5%,0% 62.5%);
    	font-size:calc(20px+(40 - 20)*(100vw - 320px)/(2560 - 320))
    }
    body,button {
    	display:flex;
    	font:1em/1.5 Hind,sans-serif
    }
    body {
    	background:#e3e4e8;
    	height:100vh;
    	overflow:hidden
    }
    button {
    	background:#255ff4;
    	border-radius:.2em;
    	color:#fff;
    	cursor:pointer;
    	display:flex;
    	margin:auto;
    	padding:.5em 1em;
    	position:relative;
    	transition:background .15s linear;
    	width:10.5em;
    	-webkit-appearance:none;
    	-moz-appearance:none;
    	appearance:none;
    	-webkit-tap-highlight-color:transparent
    }
    button:focus {
    	outline:transparent
    }
    button::-moz-focus-inner {
    	border:0
    }
    button:not(:disabled):focus,button:not(:disabled):hover {
    	background:#0b46da
    }
    button:not(:disabled):active {
    	transform:translateY(1px)
    }
    button:disabled {
    	cursor:not-allowed
    }
    button span,button:before,button:after {
    	display:inline-block;
    	pointer-events:none
    }
    button:before,button:after {
    	border-radius:.25em;
    	opacity:0;
    	top:1em;
    	left:1.3em;
    	height:.5em;
    	transform-origin:.25em 50%;
    	z-index:2
    }
    button:before {
    	transform:rotate(-180deg);
    	width:.8em
    }
    button:after {
    	width:1.2em
    }
    button:before,button:after,.dl-icon:before,.dl-icon:after {
    	content:"";
    	display:block;
    	position:absolute
    }
    button:before,button:after,.dl-icon:before {
    	background:currentColor
    }
    button span+span {
    	margin:auto
    }
    .dl-icon {
    	margin-right:.5em;
    	position:relative;
    	width:1.5em;
    	height:1.5em
    }
    .dl-icon:before {
    	clip-path:var(--arrowA);
    	-webkit-clip-path:var(--arrowA);
    	top:0;
    	left:calc(50% - .55em);
    	transform-origin:50% 100%;
    	width:1.1em;
    	height:1em;
    	z-index:1
    }
    .dl-icon:after {
    	background-image:linear-gradient(#0b46da,#0b46da);
    	background-position:-1.5em 0;
    	background-size:100% 100%;
    	background-repeat:no-repeat;
    	box-shadow:.25em 0 0 inset,-0.25em 0 0 inset,0 -0.25em 0 inset;
    	bottom:0;
    	width:100%;
    	height:.5em
    }
    .dl-working:before {
    	animation:checkOutA var(--dur) linear forwards
    }
    .dl-working:after {
    	animation:checkOutB var(--dur) linear forwards
    }
    .dl-working .dl-icon {
    	animation:impact var(--dur) linear forwards
    }
    .dl-working .dl-icon:before {
    	animation:arrowToBar var(--dur) linear forwards
    }
    .dl-working .dl-icon:after {
    	animation:trayToBar var(--dur) linear forwards
    }
    @keyframes impact {
    	from,15% {
    	transform:translateY(0)
    }
    17.5% {
    	transform:translateY(0.25em)
    }
    20%,to {
    	transform:translateY(0)
    }
    }@keyframes arrowToBar {
    	from {
    	clip-path:var(--arrowA);
    	-webkit-clip-path:var(--arrowA)
    }
    10% {
    	clip-path:var(--arrowB);
    	-webkit-clip-path:var(--arrowB);
    	transform:translateY(0)
    }
    15% {
    	clip-path:var(--arrowB);
    	-webkit-clip-path:var(--arrowB);
    .........完整代码请登录后点击上方下载按钮下载查看