Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$color: #43BBC5;
@function shadow($count, $width, $size, $offset) {
$bs: ();
@for $i from 0 through $count {
$r: $width/2;
$x: $r*cos($i*2*pi()/$count + $offset) + px;
$y: $r*sin($i*2*pi()/$count + $offset) + px;
$bs: $bs, $x $y 0px $size + px $color;
}
@return $bs;
}
.silvertech {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: .1em;
height: .1em;
margin: auto;
@include border-radius(50%);
@include experimental(animation, loading 3s alternate infinite cubic-bezier(0.215, 0.610, 0.355, 1.000));
}
@include keyframes(loading) {
0% { box-shadow: shadow(1, 0, 0, 0); @include transform(rotate(0deg)); }
19% { box-shadow: shadow(1, 0, 0, 0); @include transform(rotate(0deg)); }
20% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 0, 0); }
24% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 0, 0); }
28% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 0, 4); }
32% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 6, 4), shadow(18, 124, 0, 0); }
36% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 6, 4), shadow(18, 124, 9, 0), shadow(1, 170, 0, 0); }
40% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 6, 4), shadow(18, 124, 9, 0), shadow(1, 170, 11, 0); @include transform(rotate(-405deg)); }
100% { box-shadow: shadow(1, 0, 3, 0), shadow(2, 32, 4, 0), shadow(8, 66, 5, 0), shadow(18, 92, 6, 4), shadow(18, 124, 9, 0), shadow(1, 170, 11, 0); @include transform(rotate(-405deg)); }
}
@import 'compass/css3';
@import url(http://fonts.googleapis.com/css?family=Roboto:500);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
body {
width: 100%;
height: 100%;
margin: 0;
font-family: 'Libre Baskerville', serif;
color: #fff;
background: #F2F2F2;
&:hover {
#info {
opacity: 1;
}
}
#info {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
padding: 0 20px;
background: rgba(0,0,0,.75);
opacity: 0;
@include transition(opacity .6s cubic-bezier(0.215, 0.610, 0.355, 1.000));
}
}
h1 {
margin: 40px 0 10px;
font: 70px/70px 'Roboto', sans-serif;
text-align: center;
}
p {
margin: 0;
font-size: 12px;
color: white;
text-align: center;
}
a {
display: block;
width: 50%;
max-width: 200px;
margin: 40px auto;
padding: 4px 8px;
font: 20px/24px 'Roboto', sans-serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: white;
background: $color;
@include transition(background .25s cubic-bezier(0.215, 0.610, 0.355, 1.000), color .25s cubic-bezier(0.215, 0.610, 0.355, 1.000));
&:hover {
color: #3b3b3b;
background: #9FDADC;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.