gsap下载按钮点击显示进度动画效果代码
代码语言:html
所属分类:进度条
代码描述:gsap下载按钮点击显示进度动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap'>
<style>
.dl-parachute {
--color-text: #fff;
--color-icon: #fff;
--color-line: #fff;
--svg-y: 0px;
--arrow-x: 0px;
--arrow-y: 2px;
--arrow-r: 0deg;
--line-opacity: 0;
--circle-opacity: 1;
--parachute-o: 1;
--parachute-y: 0px;
--parachute-s: 0;
--line-progress-o: 0;
--line-progress: 260px;
--success-y: 12px;
--success-o: 0;
--number-y: 12px;
--number-o: 0;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
outline: none;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
font-size: 14px;
font-weight: 600;
font-family: "Inter";
position: relative;
width: 120px;
height: 120px;
}
.dl-parachute svg {
display: block;
pointer-events: none;
}
.dl-parachute svg.circle, .dl-parachute svg.line {
width: 280px;
height: 124px;
position: absolute;
left: -80px;
stroke-width: 3px;
stroke-linecap: round;
stroke: var(--color-line);
fill: none;
}
.dl-parachute svg.circle {
top: -2px;
opacity: var(--circle-opacity);
transform: translateY(var(--svg-y)) rotate(180deg);
}
.dl-parachute svg.line {
height: 128px;
bottom: -65px;
opacity: var(--line-opacity);
}
.dl-parachute svg.line .progress {
stroke-width: 6px;
stroke-dasharray: 260px;
opacity: var(--line-progress-o);
stroke-dashoffset: var(--line-progress);
}
.dl-parachute .arrow {
position: absolute;
left: 36px;
top: 36px;
transform: translate(var(--arrow-x), var(--arrow-y)) rotate(var(--arrow-r));
}
.dl-parachute .arrow .base {
fill: var(--color-icon);
width: 48px;
height: 48px;
}
.dl-parachute .arrow .parachute {
position: absolute;
width: 28px;
height: 32px;
fill: var(--color-icon);
left: 10px;
bottom: -26px;
transform-origin: 50% 0%;
opacity: var(--parachute-o);
transform: translateY(var(--parachute-y)) scale(var(--parachute-s));
}
.dl-parachute .number,
.dl-parachute .success {
position: absolute;
left: 0;
right: 0;
top: var(--t, 144px);
text-align: center;
color: var(--color-text);
opacity: var(--o, var(--number-o));
transform: translateY(var(--y, var(--number-y)));
}
.dl-parachute .success {
--t: 12px;
--o: var(--success-o);
--y: var(--success-y);
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
overflow: hidden;
min-height: 100vh;
font-family: "Inter";
display: flex;
justify-content: center;
align-items: center;
background: #275EFE;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
width: 76px;
}
body .twitter {
position: fixed;
display: block;
right: 112px;
bottom: 14px;
}
body .twitter svg {
width: 24px;
height: 24px;
fill: white;
}
</style>
</head>
<body>
<button class="dl-parachute">
<span class="success">Complete</span>
<div class="arrow">
<svg class=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0