html js 视频进度,HTML5/JS文件上传按钮进度动画

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);

* {

font-family: 'Roboto', sans-serif;

}

body {

background: white;

}

button:focus {

outline: none;

}

button:hover {

background: #9b59b6;

}

h2 {

font-size: 22px;

line-height: 1.6;

text-align: center;

font-weight: 300;

color: #777;

font-family: 'Roboto', sans-serif;

margin: 100px 0 0;

}

#button-wrapper {

width: 450px;

text-align: center;

padding: 0 100px;

box-sizing: border-box;

-webkit-transition: 0.3s all ease 0.3s;

transition: 0.3s all ease 0.3s;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

}

button {

width: 100%;

background: #8e44ad;

border: none;

border-radius: 50px;

padding: 5px 0;

cursor: pointer;

-webkit-transition: 0.3s all ease;

transition: 0.3s all ease;

position: relative;

}

button p {

color: white;

font-size: 18px;

font-weight: 400;

line-height: 40px;

max-height: 40px;

-webkit-transition: 0.3s all ease;

transition: 0.3s all ease;

}

button .fill {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 0%;

background: #8e44ad;

border-radius: 50px;

}

button .fa {

font-size: 25px;

color: white;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

line-height: 50px;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

}

#button-wrapper.clicked {

padding: 0;

}

#button-wrapper.clicked button {

background: #ccc;

margin-top: 25px;

}

#button-wrapper.clicked button p {

max-height: 0;

overflow: hidden;

}

#button-wrapper.clicked button .fill {

width: 100%;

-webkit-transition: 0.3s all ease 0.3s;

transition: 2s all ease 0.6s;

}

#button-wrapper.success button {

margin: 0;

height: 0;

padding: 25px;

width: 50px;

}

#button-wrapper.success button .fa {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-webkit-transition: 0.3s all ease 0.3s;

transition: 0.3s all ease 0.3s;

}