Skip to content

Instantly share code, notes, and snippets.

Created September 18, 2015 02:17
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save anonymous/189c15de49dffad6a75e to your computer and use it in GitHub Desktop.
Cloud File Upload
.btn.download
.cloud
.file
@import 'compass';
*, *:after, *:before{
@include box-sizing(border-box);
font-family:arial;
}
$prime : #0399E5;
@function shadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 100 {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}
body{text-align: center; padding-top: 25px; background: #ddd;}
.btn{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
text-align: center;
margin: 15px;
overflow: hidden;
background: $prime;
@include border-radius(100%);
@include box-shadow( 0 5px 10px #bbb);
display: inline-block;
}
.cloud{
width: 200px;
height: 80px;
position: relative;
background: #fff;
display: inline-block;
@include border-radius(50px);
margin: 120px auto 0;
@include box-shadow( shadow(darken($prime, 10%)));
&:after{
content: '';
position: absolute;
width: 120px;
height: 80px;
@include border-radius(80px 80px 0 0);
top: -40px;
background: #fff;
left: 40px;
}
&:before{
content: '';
position: absolute;
background: #636262;
@include border-radius(10px);
width: 90px;
height: 6px;
z-index: 2;
left: 0;
right: 0;
bottom: 25px;
margin: auto;
}
}
.file{
position: absolute;
left: 0 ;
right: 0;
margin: auto;
z-index: 5;
top: 50px;
width: 80px;
height: 100px;
display: inline-block;
overflow: hidden;
&:after{
content: '';
position: absolute;
background: #577FC0;
width: 80px;
height: 80px;
left:0;
top: 0;
@include border-radius(0 0 10px 10px);
@include animation(uplaod 3s linear infinite);
}
&:before{
content: '';
background: #E2E3E3;
color: #E2E3E3;
width: 60px;
height: 5px;
position: absolute;
left: 0;
right: 0;
top: 20px;
z-index: 3;
margin: auto;
@include animation(uplaod 3s linear infinite);
@include box-shadow( 0 15px, 0 30px);
}
}
@include keyframes(uplaod){
0%{@include translateY(0px)}
100%{@include translateY(-100px);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment