jquery+css实现带进度条上传按钮交互动画效果代码
代码语言：html
所属分类：上传
代码描述：jquery+css实现带进度条上传按钮交互动画效果代码
代码标签： jquery css 进度条 上传 按钮 交互 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
html,body {
width:100%;
height:100%;
padding:0;
margin:0;
}
body {
display:flex;
align-items:center;
justify-content:center;
background-color:#424242;
}
.zz-button {
color:white;
font-family:Raleway,sans-serif;
font-size:32px;
font-weight:bold;
background-color:#2f8aff;
width:250px;
height:100px;
border:none;
cursor:pointer;
outline:none;
border-radius:20% / 50%;
transition:color 0.7s ease-in-out,font-size 0.7s ease-in-out,background-color 0.7s ease-in-out,width 0.7s ease-in-out,height 0.7s ease-in-out,border-radius 0.7s ease-in-out;
}
.zz-button:after {
content:'0%';
font-size:0;
display:block;
transition:font-size 0.7s ease-in-out;
}
.zz-button.active {
font-size:18px;
background-color:#085dc9;
width:175px;
height:175px;
border-radius:50%;
}
.zz-button.active:after {
font-size:48px;
}
.zz-button[zz-button-progress='0'] {
background-image:linear-gradient(to top,#2f8aff 0%,#085dc9 0%);
}
.zz-button[zz-button-progress='0']:after {
content:"0%";
}
.zz-button[zz-button-progress='1'] {
background-image:linear-gradient(to top,#2f8aff 1%,#085dc9 1%);
}
.zz-button[zz-button-progress='1']:after {
content:"1%";
}
.zz-button[zz-button-progress='2'] {
background-image:linear-gradient(to top,#2f8aff 2%,#085dc9 2%);
}
.zz-button[zz-button-progress='2']:after {
content:"2%";
}
.zz-button[zz-button-progress='3'] {
background-image:linear-gradient(to top,#2f8aff 3%,#085dc9 3%);
}
.zz-button[zz-button-progress='3']:after {
content:"3%";
}
.zz-button[zz-button-progress='4'] {
background-image:linear-gradient(to top,#2f8aff 4%,#085dc9 4%);
}
.zz-button[zz-button-progress='4']:after {
content:"4%";
}
.zz-button[zz-button-progress='5'] {
background-image:linear-gradient(to top,#2f8aff 5%,#085dc9 5%);
}
.zz-button[zz-button-progress='5']:after {
content:"5%";
}
.zz-button[zz-button-progress='6'] {
background-image:linear-gradient(to top,#2f8aff 6%,#085dc9 6%);
}
.zz-button[zz-button-progress='6']:after {
content:"6%";
}
.zz-button[zz-button-progress='7'] {
background-image:linear-gradient(to top,#2f8aff 7%,#085dc9 7%);
}
.zz-button[zz-button-progress='7']:after {
content:"7%";
}
.zz-button[zz-button-progress='8'] {
background-image:linear-gradient(to top,#2f8aff 8%,#085dc9 8%);
}
.zz-button[zz-button-progress='8']:after {
content:"8%";
}
.zz-button[zz-button-progress='9'] {
background-image:linear-gradient(to top,#2f8aff 9%,#085dc9 9%);
}
.zz-button[zz-button-progress='9']:after {
content:"9%";
}
.zz-button[zz-button-progress='10'] {
background-image:linear-gradient(to top,#2f8aff 10%,#085dc9 10%);
}
.zz-button[zz-button-progress='10']:after {
content:"10%";
}
.zz-button[zz-button-progress='11'] {
background-image:linear-gradient(to top,#2f8aff 11%,#085dc9 11%);
}
.zz-button[zz-button-progress='11']:after {
content:"11%";
}
.zz-button[zz-button-progress='12'] {
background-image:linear-gradient(to top,#2f8aff 12%,#085dc9 12%);
}
.zz-button[zz-button-progress='12']:after {
content:"12%";
}
.zz-button[zz-button-progress='13'] {
background-image:linear-gradient(to top,#2f8aff 13%,#085dc9 13%);
}
.zz-button[zz-button-progress='13']:after {
content:"13%";
}
.zz-button[zz-button-progress='14'] {
background-image:linear-gradient(to top,#2f8aff 14%,#085dc9 14%);
}
.zz-button[zz-button-progress='14']:after {
content:"14%";
}
.zz-button[zz-button-progress='15'] {
background-image:linear-gradient(to top,#2f8aff 15%,#085dc9 15%);
}
.zz-button[zz-button-progress='15']:after {
content:"15%";
}
.zz-button[zz-button-progress='16'] {
background-image:linear-gradient(to top,#2f8aff 16%,#085dc9 16%);
}
.zz-button[zz-button-progress='16']:after {
content:"16%";
}
.zz-button[zz-button-progress='17'] {
background-image:linear-gradient(to top,#2f8aff 17%,#085dc9 17%);
}
.zz-button[zz-button-progress='17']:after {
content:"17%";
}
.zz-button[zz-button-progress='18'] {
background-image:linear-gradient(to top,#2f8aff 18%,#085dc9 18%);
}
.zz-button[zz-button-progress='18']:after {
content:"18%";
}
.zz-button[zz-button-progress='19'] {
background-image:linear-gradient(to top,#2f8aff 19%,#085dc9 19%);
}
.zz-button[zz-button-progress='19']:after {
content:"19%";
}
.zz-button[zz-button-progress='20'] {
background-image:linear-gradient(to top,#2f8aff 20%,#085dc9 20%);
}
.zz-button[zz-button-progress='20']:after {
content:"20%";
}
.zz-button[zz-button-progress='21'] {
background-image:linear-gradient(to top,#2f8aff 21%,#085dc9 21%);
}
.zz-button[zz-button-progress='21']:after {
content:"21%";
}
.zz-button[zz-button-progress='22'] {
background-image:linear-gradient(to top,#2f8aff 22%,#085dc9 22%);
}
.zz-button[zz-button-progress='22']:after {
content:"22%";
}
.zz-button[zz-button-progress='23'] {
background-image:linear-gradient(to top,#2f8aff 23%,#085dc9 23%);
}
.zz-button[zz-button-progress='23']:after {
content:"23%";
}
.zz-button[zz-button-progress='24'] {
background-image:linear-gradient(to top,#2f8aff 24%,#085dc9 24%);
}
.zz-button[zz-button-progress='24']:after {
content:"24%";
}
.zz-button[zz-button-progress='25'] {
background-image:linear-gradient(to top,#2f8aff 25%,#085dc9 25%);
}
.zz-button[zz-button-progress='25']:after {
content:"25%";
}
.zz-button[zz-button-progress='26'] {
background-image:linear-gradient(to top,#2f8aff 26%,#085dc9 26%);
}
.zz-button[zz-button-progress='26']:after {
content:"26%";
}
.zz-button[zz-button-progress='27'] {
background-image:linear-gradient(to top,#2f8aff 27%,#085dc9 27%);
}
.zz-button[zz-button-progress='27']:after {
content:"27%";
}
.zz-button[zz-button-progress='28'] {
background-image:linear-gradient(to top,#2f8aff 28%,#085dc9 28%);
}
.zz-button[zz-button-progress='28']:after {
content:"28%";
}
.zz-button[zz-button-progress='29'] {
background-image:linear-gradient(to top,#2f8aff 29%,#085dc9 29%);
}
.zz-button[zz-button-progress='29']:after {
content:"29%";
}
.zz-button[zz-button-progress='30'] {
background-image:linear-gradient(to top,#2f8aff 30%,#085dc9 30%);
}
.zz-button[zz-button-progress='30']:after {
content:"30%";
}
.zz-button[zz-button-progress='31'] {
background-image:linear-gradient(to top,#2f8aff 31%,#085dc9 31%);
}
.zz-button[zz-button-progress='31']:after {
content:"31%";
}
.zz-button[zz-button-progress='32'] {
background-image:linear-gradient(to top,#2f8aff 32%,#085dc9 32%);
}
.zz-button[zz-button-progress='32']:after {
content:"32%";
}
.zz-button[zz-button-progress='33'] {
background-image:linear-gradient(to top,#2f8aff 33%,#085dc9 33%);
}
.zz-button[zz-button-progress='33']:after {
content:"33%";
}
.zz-button[zz-button-progress='34'] {
background-image:linear-gradient(to top,#2f8aff 34%,#085dc9 34%);
}
.zz-button[zz-button-progress='34']:after {
content:"34%";
}
.zz-button[zz-button-progress='35'] {
background-image:linear-gradient(to top,#2f8aff 35%,#085dc9 35%);
}
.zz-button[zz-button-progress='35']:after {
content:"35%";
}
.zz-button[zz-button-progress='36'] {
background-image:linear-gradient(to top,#2f8aff 36%,#085dc9 36%);
}
.zz-button[zz-button-progress='36']:after {
content:"36%";
}
.zz-button[zz-button-progress='37'] {
background-image:linear-gradient(to top,#2f8aff 37%,#085dc9 37%);
}
.zz-button[zz-button-progress='37']:after {
content:"37%";
}
.zz-button[zz-button-progress='38'] {
background-image:linear-gradient(to top,#2f8aff 38%,#085dc9 38%);
}
.zz-button[zz-button-progress='38']:after {
content:"38%";
}
.zz-button[zz-button-progress='39'] {
background-image:linear-gradient(to top,#2f8aff 39%,#085dc9 39%);
}
.zz-button[zz-button-progress='39']:after {
content:"39%";
}
.zz-button[zz-button-progress='40'] {
background-image:linear-gradient(to top,#2f8aff 40%,#085dc9 40%);
}
.zz-button[zz-button-progress='40']:after {
content:"40%";
}
.zz-button[zz-button-progress='41'] {
background-image:linear-gradient(to top,#2f8aff 41%,#085dc9 41%);
}
.zz-button[zz-button-progress='41']:after {
content:"41%";
}
.zz-button[zz-button-progress='42'] {
background-image:linear-gradient(to top,#2f8aff 42%,#085dc9 42%);
}
.zz-button[zz-button-progress='42']:after {
content:"42%";
}
.zz-button[zz-button-progress='43'] {
background-image:linear-gradient(to top,#2f8aff 43%,#085dc9 43%);
}
.zz-button[zz-button-progress='43']:after {
content:"43%";
}
.zz-button[zz-button-progress='44'] {
background-image:linear-gradient(to top,#2f8aff 44%,#085dc9 44%);
}
.zz-button[zz-button-progress='44']:after {
content:"44%";
}
.zz-button[zz-button-progress='45'] {
background-image:linear-gradient(to top,#2f8aff 45%,#085dc9 45%);
}
.zz-button[zz-button-progress='45']:after {
content:"45%";
}
.zz-button[zz-button-progress='46'] {
background-image:linear-gradient(to top,#2f8aff 46%,#085dc9 46%);
}
.zz-button[zz-button-progress='46']:after {
content:"46%";
}
.zz-button[zz-button-progress='47'] {
background-image:linear-gradient(to top,#2f8aff 47%,#085dc9 47%);
}
.zz-button[zz-button-progress='47']:after {
content:"47%";
}
.zz-button[zz-button-progress='48'] {
background-image:linear-gradient(to top,#2f8aff 48%,#085dc9 48%);
}
.zz-button[zz-button-progress='48']:after {
content:"48%";
}
.zz-button[zz-button-progress='49'] {
background-image:linear-gradient(to top,#2f8aff 49%,#085dc9 49%);
}
.zz-button[zz-button-progress='49']:after {
content:"49%";
}
.zz-button[zz-button-progress='50'] {
background-image:linear-gradient(to top,#2f8aff 50%,#085dc9 50%);
}
.zz-button[zz-button-progress='50']:after {
content:"50%";
}
.zz-button[zz-button-progress='51'] {
background-image:linear-gradient(to top,#2f8aff 51%,#085dc9 51%);
}
.zz-button[zz-button-progress='51']:after {
content:"51%";
}
.zz-button[zz-button-progress='52'] {
background-image:linear-gradient(to top,#2f8aff 52%,#085dc9 52%);
}
.zz-button[zz-button-progress='52']:after {
content:"52%";
}
.zz-button[zz-button-progress='53'] {
background-image:linear-gradient(to top,#2f8aff 53%,#085dc9 53%);
}
.zz-button[zz-button-progress='53']:after {
content:"53%";
}
.zz-button[zz-button-progress='54'] {
background-image:linear-gradient(to top,#2f8aff 54%,#085dc9 54%);
}
.zz-button[zz-button-progress='54']:after {
content:"54%";
}
.zz-button[zz-button-progress='55'] {
background-image:linear-gradient(to top,#2f8aff 55%,#085dc9 55%);
}
.zz-button[zz-button-progress='55']:after {
content:"55%";
}
.zz-button[zz-button-progress='56'] {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0