jquery+css实现带进度条上传按钮交互动画效果代码-html代码-BFW代码库

jquery+css实现带进度条上传按钮交互动画效果代码

代码语言：html

所属分类：上传

代码描述：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%,#.........完整代码请登录后点击上方下载按钮下载查看