Skip to content

Instantly share code, notes, and snippets.

@ericgibb

ericgibb/index.html

Forked from anonymous/index.html
Created August 15, 2012 15:28
Show Gist options
  • Save ericgibb/3361026 to your computer and use it in GitHub Desktop.
Save ericgibb/3361026 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- IF PEN IS PRIVATE -->
<!-- <meta name="robots" content="noindex"> -->
<!-- END -->
<title>Path 2.0 Flyout Menu using CSS &middot; CodePen</title>
<!--
Copyright (c) 2012 Tunghsiao Liu, http://codepen.io/sparanoid
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<link rel="stylesheet" href="http://codepen.io/stylesheets/css/normalize.css">
<style>
/*!
Path 2.0 Flyout Menu using CSS
Contributed to Path by Tunghsiao Liu
sparanoid.com
*/
/*!
*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
:root {
padding: 60px;
background: #f9f4f0;
font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
}
#testfield {
width: 210px;
margin: 0 auto;
}
#testfield h1 {
background: #f1e7de;
border-radius: 3px;
border: 1px solid #d3bfae;
padding: 7px 10px;
margin: 20px 0 10px;
font-size: 12px;
line-height: 1.6;
color: #6d492a;
text-shadow: #fff 0 1px 1px;
box-shadow: inset #fff 0 1px 0 0;
}
#testfield h1 a {
color: #6d492a;
border-bottom: 1px dotted #d3bfae;
}
#testfield h1 a:hover {
border-color: #6d492a;
}
#testfield .flyout-wrap {
height: 191px;
position: relative;
}
#testfield .flyout-wrap .flyout {
position: relative;
margin: 0 0 1px 6px;
line-height: 0;
padding: 0;
}
#testfield .flyout-wrap .flyout > li {
position: absolute;
background: yellow;
height: 170px;
display: block;
-webkit-transform-origin: 12.5px bottom;
-moz-transform-origin: 12.5px bottom;
transform-origin: 12.5px bottom;
}
#testfield .flyout-wrap .flyout > li:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
#testfield .flyout-wrap .flyout > li:nth-of-type(2) {
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
#testfield .flyout-wrap .flyout > li:nth-of-type(3) {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
}
#testfield .flyout-wrap .flyout > li:nth-of-type(4) {
-webkit-transform: rotate(54deg);
-moz-transform: rotate(54deg);
-ms-transform: rotate(54deg);
-o-transform: rotate(54deg);
transform: rotate(54deg);
}
#testfield .flyout-wrap .flyout > li:nth-of-type(5) {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
#testfield .flyout-wrap .flyout > li:nth-of-type(6) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#testfield .flyout-wrap .flyout > li a {
position: absolute;
display: block;
border-radius: 50%;
height: 26px;
width: 26px;
border: 3px solid #fff;
box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px 0, rgba(0, 0, 0, 0.2) 0 0 0 1px, inset rgba(0, 0, 0, 0.5) 0 0 2px 0;
text-indent: -99999px;
overflow: hidden;
background: #444;
}
#testfield .flyout-wrap .flyout > li a:active {
background: #000;
border-color: #555;
}
#testfield .flyout-wrap .flyout > li a:active span {
opacity: .3;
}
#testfield .flyout-wrap .flyout > li a span {
display: block;
height: 26px;
width: 26px;
background: url(http://sparanoid.com/lab/path-menu/star.svg) no-repeat center center;
background-size: 16px 16px;
}
#testfield .flyout-wrap .flyout-init li {
display: none;
}
#testfield .flyout-wrap .flyout.expand li a {
-webkit-animation: expand 0.6s ease 1 backwards;
-moz-animation: expand 0.6s ease 1 backwards;
-ms-animation: expand 0.6s ease 1 backwards;
-o-animation: expand 0.6s ease 1 backwards;
animation: expand 0.6s ease 1 backwards;
top: 10px;
}
#testfield .flyout-wrap .flyout li a {
-webkit-animation: contract 0.35s ease-out 1 backwards;
-moz-animation: contract 0.35s ease-out 1 backwards;
-ms-animation: contract 0.35s ease-out 1 backwards;
-o-animation: contract 0.35s ease-out 1 backwards;
animation: contract 0.35s ease-out 1 backwards;
top: 150px;
}
#testfield .flyout-wrap .flyout.fade li a.clicked {
-webkit-animation: clicked 0.5s ease-out 1 forwards;
-moz-animation: clicked 0.5s ease-out 1 forwards;
-ms-animation: clicked 0.5s ease-out 1 forwards;
-o-animation: clicked 0.5s ease-out 1 forwards;
animation: clicked 0.5s ease-out 1 forwards;
top: 10px;
}
#testfield .flyout-wrap .flyout.fade li a:not(.clicked) {
-webkit-animation: fade 0.5s ease-out 1 forwards;
-moz-animation: fade 0.5s ease-out 1 forwards;
-ms-animation: fade 0.5s ease-out 1 forwards;
-o-animation: fade 0.5s ease-out 1 forwards;
animation: fade 0.5s ease-out 1 forwards;
top: 10px;
}
#testfield .flyout-wrap .flyout.fade li a:not(.clicked) span {
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
opacity: .1;
}
#testfield .flyout-wrap .flyout.fade li a:not(.clicked) span {
opacity: .1;
-webkit-transition: opacity 1.5s ease;
}
#testfield .flyout-wrap .flyout li:nth-of-type(1) a {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#testfield .flyout-wrap .flyout li:nth-of-type(2) a {
-webkit-animation-delay: 0.16s;
-moz-animation-delay: 0.16s;
-ms-animation-delay: 0.16s;
-o-animation-delay: 0.16s;
animation-delay: 0.16s;
}
#testfield .flyout-wrap .flyout li:nth-of-type(3) a {
-webkit-animation-delay: 0.12s;
-moz-animation-delay: 0.12s;
-ms-animation-delay: 0.12s;
-o-animation-delay: 0.12s;
animation-delay: 0.12s;
}
#testfield .flyout-wrap .flyout li:nth-of-type(4) a {
-webkit-animation-delay: 0.08s;
-moz-animation-delay: 0.08s;
-ms-animation-delay: 0.08s;
-o-animation-delay: 0.08s;
animation-delay: 0.08s;
}
#testfield .flyout-wrap .flyout li:nth-of-type(5) a {
-webkit-animation-delay: 0.04s;
-moz-animation-delay: 0.04s;
-ms-animation-delay: 0.04s;
-o-animation-delay: 0.04s;
animation-delay: 0.04s;
}
#testfield .flyout-wrap .flyout li:nth-of-type(6) a {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#testfield .flyout-wrap .flyout li:nth-of-type(1) a:not(.clicked) span {
-webkit-animation: spin1-contract 0.9s ease-out 1 backwards;
-moz-animation: spin1-contract 0.9s ease-out 1 backwards;
-ms-animation: spin1-contract 0.9s ease-out 1 backwards;
-o-animation: spin1-contract 0.9s ease-out 1 backwards;
animation: spin1-contract 0.9s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout li:nth-of-type(2) a:not(.clicked) span {
-webkit-animation: spin2-contract 0.9s ease-out 1 backwards;
-moz-animation: spin2-contract 0.9s ease-out 1 backwards;
-ms-animation: spin2-contract 0.9s ease-out 1 backwards;
-o-animation: spin2-contract 0.9s ease-out 1 backwards;
animation: spin2-contract 0.9s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout li:nth-of-type(3) a:not(.clicked) span {
-webkit-animation: spin3-contract 0.9s ease-out 1 backwards;
-moz-animation: spin3-contract 0.9s ease-out 1 backwards;
-ms-animation: spin3-contract 0.9s ease-out 1 backwards;
-o-animation: spin3-contract 0.9s ease-out 1 backwards;
animation: spin3-contract 0.9s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout li:nth-of-type(4) a:not(.clicked) span {
-webkit-animation: spin4-contract 0.9s ease-out 1 backwards;
-moz-animation: spin4-contract 0.9s ease-out 1 backwards;
-ms-animation: spin4-contract 0.9s ease-out 1 backwards;
-o-animation: spin4-contract 0.9s ease-out 1 backwards;
animation: spin4-contract 0.9s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout li:nth-of-type(5) a:not(.clicked) span {
-webkit-animation: spin5-contract 0.9s ease-out 1 backwards;
-moz-animation: spin5-contract 0.9s ease-out 1 backwards;
-ms-animation: spin5-contract 0.9s ease-out 1 backwards;
-o-animation: spin5-contract 0.9s ease-out 1 backwards;
animation: spin5-contract 0.9s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout li:nth-of-type(6) a:not(.clicked) span {
-webkit-animation: spin6-contract 0.9s ease-out 1 backwards;
-moz-animation: spin6-contract 0.9s ease-out 1 backwards;
-ms-animation: spin6-contract 0.9s ease-out 1 backwards;
-o-animation: spin6-contract 0.9s ease-out 1 backwards;
animation: spin6-contract 0.9s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(1) a {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(2) a {
-webkit-animation-delay: 0.04s;
-moz-animation-delay: 0.04s;
-ms-animation-delay: 0.04s;
-o-animation-delay: 0.04s;
animation-delay: 0.04s;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(3) a {
-webkit-animation-delay: 0.08s;
-moz-animation-delay: 0.08s;
-ms-animation-delay: 0.08s;
-o-animation-delay: 0.08s;
animation-delay: 0.08s;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(4) a {
-webkit-animation-delay: 0.12s;
-moz-animation-delay: 0.12s;
-ms-animation-delay: 0.12s;
-o-animation-delay: 0.12s;
animation-delay: 0.12s;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(5) a {
-webkit-animation-delay: 0.16s;
-moz-animation-delay: 0.16s;
-ms-animation-delay: 0.16s;
-o-animation-delay: 0.16s;
animation-delay: 0.16s;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(6) a {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(1) a span {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: spin1-expand 0.6s ease-out 1 backwards;
-moz-animation: spin1-expand 0.6s ease-out 1 backwards;
-ms-animation: spin1-expand 0.6s ease-out 1 backwards;
-o-animation: spin1-expand 0.6s ease-out 1 backwards;
animation: spin1-expand 0.6s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(2) a span {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
-webkit-animation: spin2-expand 0.6s ease-out 1 backwards;
-moz-animation: spin2-expand 0.6s ease-out 1 backwards;
-ms-animation: spin2-expand 0.6s ease-out 1 backwards;
-o-animation: spin2-expand 0.6s ease-out 1 backwards;
animation: spin2-expand 0.6s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(3) a span {
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
transform: rotate(-36deg);
-webkit-animation: spin3-expand 0.6s ease-out 1 backwards;
-moz-animation: spin3-expand 0.6s ease-out 1 backwards;
-ms-animation: spin3-expand 0.6s ease-out 1 backwards;
-o-animation: spin3-expand 0.6s ease-out 1 backwards;
animation: spin3-expand 0.6s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(4) a span {
-webkit-transform: rotate(-54deg);
-moz-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
transform: rotate(-54deg);
-webkit-animation: spin4-expand 0.6s ease-out 1 backwards;
-moz-animation: spin4-expand 0.6s ease-out 1 backwards;
-ms-animation: spin4-expand 0.6s ease-out 1 backwards;
-o-animation: spin4-expand 0.6s ease-out 1 backwards;
animation: spin4-expand 0.6s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(5) a span {
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
transform: rotate(-72deg);
-webkit-animation: spin5-expand 0.6s ease-out 1 backwards;
-moz-animation: spin5-expand 0.6s ease-out 1 backwards;
-ms-animation: spin5-expand 0.6s ease-out 1 backwards;
-o-animation: spin5-expand 0.6s ease-out 1 backwards;
animation: spin5-expand 0.6s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout.expand li:nth-of-type(6) a span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-animation: spin6-expand 0.6s ease-out 1 backwards;
-moz-animation: spin6-expand 0.6s ease-out 1 backwards;
-ms-animation: spin6-expand 0.6s ease-out 1 backwards;
-o-animation: spin6-expand 0.6s ease-out 1 backwards;
animation: spin6-expand 0.6s ease-out 1 backwards;
}
#testfield .flyout-wrap .flyout.fade li:nth-of-type(1) a.clicked span {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
#testfield .flyout-wrap .flyout.fade li:nth-of-type(2) a.clicked span {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
}
#testfield .flyout-wrap .flyout.fade li:nth-of-type(3) a.clicked span {
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
transform: rotate(-36deg);
}
#testfield .flyout-wrap .flyout.fade li:nth-of-type(4) a.clicked span {
-webkit-transform: rotate(-54deg);
-moz-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
transform: rotate(-54deg);
}
#testfield .flyout-wrap .flyout.fade li:nth-of-type(5) a.clicked span {
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
transform: rotate(-72deg);
}
#testfield .flyout-wrap .flyout.fade li:nth-of-type(6) a.clicked span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#testfield .flyout-wrap .flyout-btn {
position: absolute;
bottom: 0;
left: 0;
border-radius: 50%;
height: 36px;
width: 36px;
border: 4px solid #fff;
box-shadow: rgba(0, 0, 0, 0.3) 0 3px 8px 0, rgba(0, 0, 0, 0.2) 0 0 0 1px, inset rgba(0, 0, 0, 0.3) 0 0 0 1px, inset rgba(255, 255, 255, 0.3) 0 1px 0 1px;
text-indent: -99999px;
overflow: hidden;
background: #f76f54;
background: -webkit-linear-gradient(top, #f76f54 0%, #dd3535 49%, #d32121 51%, #c61f1f 100%);
background: -moz-linear-gradient(top, #f76f54 0%, #dd3535 49%, #d32121 51%, #c61f1f 100%);
background: -ms-linear-gradient(top, #f76f54 0%, #dd3535 49%, #d32121 51%, #c61f1f 100%);
background: -o-linear-gradient(top, #f76f54 0%, #dd3535 49%, #d32121 51%, #c61f1f 100%);
background: linear-gradient(top, #f76f54 0%, #dd3535 49%, #d32121 51%, #c61f1f 100%);
z-index: 9999;
outline: none;
}
#testfield .flyout-wrap .flyout-btn span {
display: block;
height: 36px;
width: 36px;
background: url(http://sparanoid.com/lab/path-menu/cross.svg) no-repeat center center;
-webkit-transition: -webkit-transform 0.4s ease;
-moz-transition: -moz-transform 0.4s ease;
transition: transform .4s ease;
}
#testfield .flyout-wrap .flyout-btn.btn-rotate span {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#testfield .flyout-wrap .ani-expand 0% {
top: 150px;
}
#testfield .flyout-wrap .ani-expand 50% {
top: -10px;
}
#testfield .flyout-wrap .ani-expand 70% {
top: 15px;
}
#testfield .flyout-wrap .ani-expand 100% {
top: 10px;
}
#testfield .flyout-wrap .ani-contract 0% {
top: 10px;
}
#testfield .flyout-wrap .ani-contract 40% {
top: -25px;
}
#testfield .flyout-wrap .ani-contract 100% {
top: 150px;
}
#testfield .flyout-wrap .ani-clicked 0% {
-webkit-transform: scale(1);
opacity: 1;
}
#testfield .flyout-wrap .ani-clicked 100% {
-webkit-transform: scale(5);
opacity: 0;
}
@-webkit-keyframes expand {
0% {
top: 150px;
}
50% {
top: -10px;
}
70% {
top: 15px;
}
100% {
top: 10px;
}
}
@-moz-keyframes expand {
0% {
top: 150px;
}
50% {
top: -10px;
}
70% {
top: 15px;
}
100% {
top: 10px;
}
}
@-webkit-keyframes contract {
0% {
top: 10px;
}
40% {
top: -25px;
}
100% {
top: 150px;
}
}
@-moz-keyframes contract {
0% {
top: 10px;
}
40% {
top: -25px;
}
100% {
top: 150px;
}
}
@-webkit-keyframes clicked {
0% {
-webkit-transform: scale(1);
opacity: 1;
top: 10px;
}
90% {
top: 10px;
}
99% {
-webkit-transform: scale(6);
opacity: 0;
top: 150px;
}
100% {
-webkit-transform: scale(0);
}
}
@-moz-keyframes clicked {
0% {
-moz-transform: scale(1);
opacity: 1;
top: 10px;
}
90% {
top: 10px;
}
99% {
-moz-transform: scale(6);
opacity: 0;
top: 150px;
}
100% {
-moz-transform: scale(0);
}
}
@-webkit-keyframes fade {
0% {
-webkit-transform: scale(1);
opacity: 1;
top: 10px;
}
90% {
opacity: 0;
top: 10px;
}
99% {
-webkit-transform: scale(0);
top: 150px;
}
100% {
-webkit-transform: scale(0);
}
}
@-moz-keyframes fade {
0% {
-moz-transform: scale(1);
opacity: 1;
top: 10px;
}
90% {
opacity: 0;
top: 10px;
}
99% {
-moz-transform: scale(0);
top: 150px;
}
100% {
-moz-transform: scale(0);
}
}
#testfield .flyout-wrap .ani-spin1-expand 0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
#testfield .flyout-wrap .ani-spin1-expand 60% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
#testfield .flyout-wrap .ani-spin1-expand 100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
#testfield .flyout-wrap .ani-spin2-expand 0% {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
}
#testfield .flyout-wrap .ani-spin2-expand 60% {
-webkit-transform: rotate(-378deg);
-moz-transform: rotate(-378deg);
-ms-transform: rotate(-378deg);
-o-transform: rotate(-378deg);
transform: rotate(-378deg);
}
#testfield .flyout-wrap .ani-spin2-expand 100% {
-webkit-transform: rotate(-378deg);
-moz-transform: rotate(-378deg);
-ms-transform: rotate(-378deg);
-o-transform: rotate(-378deg);
transform: rotate(-378deg);
}
#testfield .flyout-wrap .ani-spin3-expand 0% {
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
transform: rotate(-36deg);
}
#testfield .flyout-wrap .ani-spin3-expand 60% {
-webkit-transform: rotate(-396deg);
-moz-transform: rotate(-396deg);
-ms-transform: rotate(-396deg);
-o-transform: rotate(-396deg);
transform: rotate(-396deg);
}
#testfield .flyout-wrap .ani-spin3-expand 100% {
-webkit-transform: rotate(-396deg);
-moz-transform: rotate(-396deg);
-ms-transform: rotate(-396deg);
-o-transform: rotate(-396deg);
transform: rotate(-396deg);
}
#testfield .flyout-wrap .ani-spin4-expand 0% {
-webkit-transform: rotate(-54deg);
-moz-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
transform: rotate(-54deg);
}
#testfield .flyout-wrap .ani-spin4-expand 60% {
-webkit-transform: rotate(-414deg);
-moz-transform: rotate(-414deg);
-ms-transform: rotate(-414deg);
-o-transform: rotate(-414deg);
transform: rotate(-414deg);
}
#testfield .flyout-wrap .ani-spin4-expand 100% {
-webkit-transform: rotate(-414deg);
-moz-transform: rotate(-414deg);
-ms-transform: rotate(-414deg);
-o-transform: rotate(-414deg);
transform: rotate(-414deg);
}
#testfield .flyout-wrap .ani-spin5-expand 0% {
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
transform: rotate(-72deg);
}
#testfield .flyout-wrap .ani-spin5-expand 60% {
-webkit-transform: rotate(-432deg);
-moz-transform: rotate(-432deg);
-ms-transform: rotate(-432deg);
-o-transform: rotate(-432deg);
transform: rotate(-432deg);
}
#testfield .flyout-wrap .ani-spin5-expand 100% {
-webkit-transform: rotate(-432deg);
-moz-transform: rotate(-432deg);
-ms-transform: rotate(-432deg);
-o-transform: rotate(-432deg);
transform: rotate(-432deg);
}
#testfield .flyout-wrap .ani-spin6-expand 0% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#testfield .flyout-wrap .ani-spin6-expand 60% {
-webkit-transform: rotate(-450deg);
-moz-transform: rotate(-450deg);
-ms-transform: rotate(-450deg);
-o-transform: rotate(-450deg);
transform: rotate(-450deg);
}
#testfield .flyout-wrap .ani-spin6-expand 100% {
-webkit-transform: rotate(-450deg);
-moz-transform: rotate(-450deg);
-ms-transform: rotate(-450deg);
-o-transform: rotate(-450deg);
transform: rotate(-450deg);
}
#testfield .flyout-wrap .ani-spin1-contract 0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
#testfield .flyout-wrap .ani-spin1-contract 50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin1-contract 100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin2-contract 0% {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
}
#testfield .flyout-wrap .ani-spin2-contract 50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin2-contract 100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin3-contract 0% {
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
transform: rotate(-36deg);
}
#testfield .flyout-wrap .ani-spin3-contract 50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin3-contract 100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin4-contract 0% {
-webkit-transform: rotate(-54deg);
-moz-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
transform: rotate(-54deg);
}
#testfield .flyout-wrap .ani-spin4-contract 50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin4-contract 100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin5-contract 0% {
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
transform: rotate(-72deg);
}
#testfield .flyout-wrap .ani-spin5-contract 50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin5-contract 100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin6-contract 0% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#testfield .flyout-wrap .ani-spin6-contract 50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#testfield .flyout-wrap .ani-spin6-contract 100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
@-webkit-keyframes spin1-expand {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
60% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes spin2-expand {
0% {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
}
60% {
-webkit-transform: rotate(-378deg);
-moz-transform: rotate(-378deg);
-ms-transform: rotate(-378deg);
-o-transform: rotate(-378deg);
transform: rotate(-378deg);
}
100% {
-webkit-transform: rotate(-378deg);
-moz-transform: rotate(-378deg);
-ms-transform: rotate(-378deg);
-o-transform: rotate(-378deg);
transform: rotate(-378deg);
}
}
@-webkit-keyframes spin3-expand {
0% {
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
transform: rotate(-36deg);
}
60% {
-webkit-transform: rotate(-396deg);
-moz-transform: rotate(-396deg);
-ms-transform: rotate(-396deg);
-o-transform: rotate(-396deg);
transform: rotate(-396deg);
}
100% {
-webkit-transform: rotate(-396deg);
-moz-transform: rotate(-396deg);
-ms-transform: rotate(-396deg);
-o-transform: rotate(-396deg);
transform: rotate(-396deg);
}
}
@-webkit-keyframes spin4-expand {
0% {
-webkit-transform: rotate(-54deg);
-moz-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
transform: rotate(-54deg);
}
60% {
-webkit-transform: rotate(-414deg);
-moz-transform: rotate(-414deg);
-ms-transform: rotate(-414deg);
-o-transform: rotate(-414deg);
transform: rotate(-414deg);
}
100% {
-webkit-transform: rotate(-414deg);
-moz-transform: rotate(-414deg);
-ms-transform: rotate(-414deg);
-o-transform: rotate(-414deg);
transform: rotate(-414deg);
}
}
@-webkit-keyframes spin5-expand {
0% {
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
transform: rotate(-72deg);
}
60% {
-webkit-transform: rotate(-432deg);
-moz-transform: rotate(-432deg);
-ms-transform: rotate(-432deg);
-o-transform: rotate(-432deg);
transform: rotate(-432deg);
}
100% {
-webkit-transform: rotate(-432deg);
-moz-transform: rotate(-432deg);
-ms-transform: rotate(-432deg);
-o-transform: rotate(-432deg);
transform: rotate(-432deg);
}
}
@-webkit-keyframes spin6-expand {
0% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
60% {
-webkit-transform: rotate(-450deg);
-moz-transform: rotate(-450deg);
-ms-transform: rotate(-450deg);
-o-transform: rotate(-450deg);
transform: rotate(-450deg);
}
100% {
-webkit-transform: rotate(-450deg);
-moz-transform: rotate(-450deg);
-ms-transform: rotate(-450deg);
-o-transform: rotate(-450deg);
transform: rotate(-450deg);
}
}
@-moz-keyframes spin1-expand {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
60% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-moz-keyframes spin2-expand {
0% {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
}
60% {
-webkit-transform: rotate(-378deg);
-moz-transform: rotate(-378deg);
-ms-transform: rotate(-378deg);
-o-transform: rotate(-378deg);
transform: rotate(-378deg);
}
100% {
-webkit-transform: rotate(-378deg);
-moz-transform: rotate(-378deg);
-ms-transform: rotate(-378deg);
-o-transform: rotate(-378deg);
transform: rotate(-378deg);
}
}
@-moz-keyframes spin3-expand {
0% {
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
transform: rotate(-36deg);
}
60% {
-webkit-transform: rotate(-396deg);
-moz-transform: rotate(-396deg);
-ms-transform: rotate(-396deg);
-o-transform: rotate(-396deg);
transform: rotate(-396deg);
}
100% {
-webkit-transform: rotate(-396deg);
-moz-transform: rotate(-396deg);
-ms-transform: rotate(-396deg);
-o-transform: rotate(-396deg);
transform: rotate(-396deg);
}
}
@-moz-keyframes spin4-expand {
0% {
-webkit-transform: rotate(-54deg);
-moz-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
transform: rotate(-54deg);
}
60% {
-webkit-transform: rotate(-414deg);
-moz-transform: rotate(-414deg);
-ms-transform: rotate(-414deg);
-o-transform: rotate(-414deg);
transform: rotate(-414deg);
}
100% {
-webkit-transform: rotate(-414deg);
-moz-transform: rotate(-414deg);
-ms-transform: rotate(-414deg);
-o-transform: rotate(-414deg);
transform: rotate(-414deg);
}
}
@-moz-keyframes spin5-expand {
0% {
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
transform: rotate(-72deg);
}
60% {
-webkit-transform: rotate(-432deg);
-moz-transform: rotate(-432deg);
-ms-transform: rotate(-432deg);
-o-transform: rotate(-432deg);
transform: rotate(-432deg);
}
100% {
-webkit-transform: rotate(-432deg);
-moz-transform: rotate(-432deg);
-ms-transform: rotate(-432deg);
-o-transform: rotate(-432deg);
transform: rotate(-432deg);
}
}
@-moz-keyframes spin6-expand {
0% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
60% {
-webkit-transform: rotate(-450deg);
-moz-transform: rotate(-450deg);
-ms-transform: rotate(-450deg);
-o-transform: rotate(-450deg);
transform: rotate(-450deg);
}
100% {
-webkit-transform: rotate(-450deg);
-moz-transform: rotate(-450deg);
-ms-transform: rotate(-450deg);
-o-transform: rotate(-450deg);
transform: rotate(-450deg);
}
}
@-webkit-keyframes spin1-contract {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin2-contract {
0% {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin3-contract {
0% {
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
transform: rotate(-36deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin4-contract {
0% {
-webkit-transform: rotate(-54deg);
-moz-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
transform: rotate(-54deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin5-contract {
0% {
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
transform: rotate(-72deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin6-contract {
0% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin1-contract {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin2-contract {
0% {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin3-contract {
0% {
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
transform: rotate(-36deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin4-contract {
0% {
-webkit-transform: rotate(-54deg);
-moz-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
transform: rotate(-54deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin5-contract {
0% {
-webkit-transform: rotate(-72deg);
-moz-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
transform: rotate(-72deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin6-contract {
0% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
50% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.bsap {
position: fixed;
top: 0;
right: 0;
width: 130px;
margin: 15px;
padding: 10px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.bsap:hover {
background: rgba(255, 255, 255, 0.95);
}
.bsap a {
color: #555;
}
.bsap a:hover {
color: #000;
}
.bsa_it_t {
font-size: 14px;
display: block;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.bsa_it_d {
font-size: 12px;
display: block;
padding: 5px 0;
}
.bsa_it_p {
font-size: 10px;
}
.bsa_it_p a {
opacity: .5;
}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: normal !important;
word-spacing: 0 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
text-shadow: none !important;
border: 0 !important;
}
#codepen-footer a:hover {
color: white !important;
}
#codepen-footer:before,
#codepen-footer:after {
display: none;
}
</style>
<script>
// Kill alerts, confirmations and prompts
// window.alert = function(){}; we're going to allow alerts for now
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script>
</head>
<body>
<div id="testfield" class="span16">
<div class="flyout-wrap">
<a class="flyout-btn" href="#" title="Toggle"><span>Flyout Menu Toggle</span></a>
<ul class="flyout flyout-init">
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
</ul><!-- .flyout -->
</div><!-- .flyout-wrap -->
<h1><a href="https://path.com/">Path</a> 2.0 Flyout Menu using CSS by <a href="http://sparanoid.com/">Tunghsiao Liu</a></h1>
</div><!-- #testfield -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function() {
$(".flyout-btn").click(function() {
$(".flyout-btn").toggleClass("btn-rotate");
$(".flyout").find("a").removeClass();
$(".flyout").removeClass("flyout-init fade").toggleClass("expand");
});
$(".flyout").find("a").click(function() {
$(".flyout-btn").toggleClass("btn-rotate");
$(".flyout").removeClass("expand").addClass("fade");
$(this).addClass("clicked");
});
})();
</script>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" target="_blank">Report Abuse</a>
&nbsp;
<a href="/sparanoid/pen/nHAmi" target="_blank">Edit this Pen</a>
</div>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30102653-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Raw
index.js
$(".flyout-btn").click(function() {
$(".flyout-btn").toggleClass("btn-rotate");
$(".flyout").find("a").removeClass();
$(".flyout").removeClass("flyout-init fade").toggleClass("expand");
});
$(".flyout").find("a").click(function() {
$(".flyout-btn").toggleClass("btn-rotate");
$(".flyout").removeClass("expand").addClass("fade");
$(this).addClass("clicked");
});
Raw
markup.html
<div id="testfield" class="span16">
<div class="flyout-wrap">
<a class="flyout-btn" href="#" title="Toggle"><span>Flyout Menu Toggle</span></a>
<ul class="flyout flyout-init">
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
</ul><!-- .flyout -->
</div><!-- .flyout-wrap -->
<h1><a href="https://path.com/">Path</a> 2.0 Flyout Menu using CSS by <a href="http://sparanoid.com/">Tunghsiao Liu</a></h1>
</div><!-- #testfield -->
Raw
style.less
/*!
Path 2.0 Flyout Menu using CSS
Contributed to Path by Tunghsiao Liu
sparanoid.com
*/
/*!
*/
* { margin: 0; padding: 0; text-decoration: none; }
:root {
padding: 60px;
background: #f9f4f0;
font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
}
@rate: 18deg;
@d1: @rate * 0;
@d2: @rate * 1;
@d3: @rate * 2;
@d4: @rate * 3;
@d5: @rate * 4;
@d6: @rate * 5;
.animation (@var) {
-webkit-animation: @arguments;
-moz-animation: @arguments;
-ms-animation: @arguments;
-o-animation: @arguments;
animation: @arguments;
}
.animation-delay (@var) {
-webkit-animation-delay: @arguments;
-moz-animation-delay: @arguments;
-ms-animation-delay: @arguments;
-o-animation-delay: @arguments;
animation-delay: @arguments;
}
.transform (@var) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-ms-transform: @arguments;
-o-transform: @arguments;
transform: @arguments;
}
.transition (@var) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
-ms-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
#testfield {
width: 210px;
margin: 0 auto;
//background: #fff;
h1 {
background: #f1e7de;
border-radius: 3px;
border: 1px solid #d3bfae;
padding: 7px 10px;
margin: 20px 0 10px;
font-size: 12px;
line-height: 1.6;
color: #6d492a;
text-shadow: #fff 0 1px 1px;
box-shadow: inset #fff 0 1px 0 0;
a {
color: #6d492a;
border-bottom: 1px dotted #d3bfae;
&:hover {
border-color: #6d492a;
}
}
}
.flyout-wrap {
height: 191px;
position: relative;
.flyout {
position: relative;
margin: 0 0 1px 6px;
line-height: 0;
padding: 0; // FIXME: hotfix for codepen
& > li {
position: absolute;
background: yellow;
height: 170px;
display: block;
-webkit-transform-origin: 25px / 2 bottom;
-moz-transform-origin: 25px / 2 bottom;
transform-origin: 25px / 2 bottom;
&:nth-of-type(1) { .transform(rotate(@d1)); }
&:nth-of-type(2) { .transform(rotate(@d2)); }
&:nth-of-type(3) { .transform(rotate(@d3)); }
&:nth-of-type(4) { .transform(rotate(@d4)); }
&:nth-of-type(5) { .transform(rotate(@d5)); }
&:nth-of-type(6) { .transform(rotate(@d6)); }
a {
position: absolute;
display: block;
border-radius: 50%;
height: 26px;
width: 26px;
border: 3px solid #fff;
box-shadow: rgba(0, 0, 0, .4) 0 0 5px 0, rgba(0, 0, 0, .2) 0 0 0 1px, inset rgba(0, 0, 0, .5) 0 0 2px 0;
text-indent: -99999px;
overflow: hidden;
background: #444;
&:active {
background: #000;
border-color: #555;
span {
opacity: .3;
}
}
span {
display: block;
height: 26px;
width: 26px;
background: url(http://sparanoid.com/lab/path-menu/star.svg) no-repeat center center;
background-size: 16px 16px;
// -webkit-mask-image: url(http://sparanoid.com/lab/path-menu/star.svg);
}
}
}
}
// triggers
// LESS doesn't support loops and parametric mixins very well,
// a workaround solution: use Textmate
.flyout-init li { display: none; }
.flyout.expand li a { .animation(expand .6s ease 1 backwards); top: 10px; }
.flyout li a { .animation(contract .35s ease-out 1 backwards); top: 150px; }
.flyout.fade li a.clicked { .animation(clicked .5s ease-out 1 forwards); top: 10px; }
.flyout.fade li a:not(.clicked) { .animation(fade .5s ease-out 1 forwards); top: 10px;
span { .transition(opacity .3s ease); opacity: .1; }
}
.flyout.fade li a:not(.clicked) span { opacity: .1; -webkit-transition: opacity 1.5s ease; }
.flyout li:nth-of-type(1) a { .animation-delay(.20s); }
.flyout li:nth-of-type(2) a { .animation-delay(.16s); }
.flyout li:nth-of-type(3) a { .animation-delay(.12s); }
.flyout li:nth-of-type(4) a { .animation-delay(.08s); }
.flyout li:nth-of-type(5) a { .animation-delay(.04s); }
.flyout li:nth-of-type(6) a { .animation-delay(.00s); }
.flyout li:nth-of-type(1) a:not(.clicked) span { .animation(spin1-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(2) a:not(.clicked) span { .animation(spin2-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(3) a:not(.clicked) span { .animation(spin3-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(4) a:not(.clicked) span { .animation(spin4-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(5) a:not(.clicked) span { .animation(spin5-contract .9s ease-out 1 backwards); }
.flyout li:nth-of-type(6) a:not(.clicked) span { .animation(spin6-contract .9s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(1) a { .animation-delay(.00s); }
.flyout.expand li:nth-of-type(2) a { .animation-delay(.04s); }
.flyout.expand li:nth-of-type(3) a { .animation-delay(.08s); }
.flyout.expand li:nth-of-type(4) a { .animation-delay(.12s); }
.flyout.expand li:nth-of-type(5) a { .animation-delay(.16s); }
.flyout.expand li:nth-of-type(6) a { .animation-delay(.20s); }
.flyout.expand li:nth-of-type(1) a span { .transform(rotate(-@d1)); .animation(spin1-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(2) a span { .transform(rotate(-@d2)); .animation(spin2-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(3) a span { .transform(rotate(-@d3)); .animation(spin3-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(4) a span { .transform(rotate(-@d4)); .animation(spin4-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(5) a span { .transform(rotate(-@d5)); .animation(spin5-expand .6s ease-out 1 backwards); }
.flyout.expand li:nth-of-type(6) a span { .transform(rotate(-@d6)); .animation(spin6-expand .6s ease-out 1 backwards); }
.flyout.fade li:nth-of-type(1) a.clicked span { .transform(rotate(-@d1)); }
.flyout.fade li:nth-of-type(2) a.clicked span { .transform(rotate(-@d2)); }
.flyout.fade li:nth-of-type(3) a.clicked span { .transform(rotate(-@d3)); }
.flyout.fade li:nth-of-type(4) a.clicked span { .transform(rotate(-@d4)); }
.flyout.fade li:nth-of-type(5) a.clicked span { .transform(rotate(-@d5)); }
.flyout.fade li:nth-of-type(6) a.clicked span { .transform(rotate(-@d6)); }
.flyout-btn {
position: absolute;
bottom: 0;
left: 0;
border-radius: 50%;
height: 36px;
width: 36px;
border: 4px solid #fff;
box-shadow: rgba(0, 0, 0, .3) 0 3px 8px 0, rgba(0, 0, 0, .2) 0 0 0 1px, inset rgba(0, 0, 0, .3) 0 0 0 1px, inset rgba(255, 255, 255, .3) 0 1px 0 1px;
text-indent: -99999px;
overflow: hidden;
background: #f76f54;
background: -webkit-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
background: -moz-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
background: -ms-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
background: -o-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
background: linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
z-index: 9999;
outline: none;
&:hover {
// never mind
}
span {
display: block;
height: 36px;
width: 36px;
background: url(http://sparanoid.com/lab/path-menu/cross.svg) no-repeat center center;
-webkit-transition: -webkit-transform .4s ease;
-moz-transition: -moz-transform .4s ease;
transition: transform .4s ease;
}
}
.flyout-btn.btn-rotate span {
.transform(rotate(-135deg));
}
.ani-expand {
0% { top: 150px; }
50% { top: -10px; }
70% { top: 15px; }
100% { top: 10px; }
}
.ani-contract {
0% { top: 10px; }
40% { top: -25px; }
100% { top: 150px; }
}
.ani-clicked {
0% { -webkit-transform: scale(1); opacity: 1; }
100% { -webkit-transform: scale(5); opacity: 0; }
}
@-webkit-keyframes expand { .ani-expand }
@-moz-keyframes expand { .ani-expand }
@-webkit-keyframes contract { .ani-contract }
@-moz-keyframes contract { .ani-contract }
// a small trick
@-webkit-keyframes clicked {
0% { -webkit-transform: scale(1); opacity: 1; top: 10px; }
90% { top: 10px; }
99% { -webkit-transform: scale(6); opacity: 0; top: 150px; }
100% { -webkit-transform: scale(0); }
}
@-moz-keyframes clicked {
0% { -moz-transform: scale(1); opacity: 1; top: 10px; }
90% { top: 10px; }
99% { -moz-transform: scale(6); opacity: 0; top: 150px; }
100% { -moz-transform: scale(0); }
}
@-webkit-keyframes fade {
0% { -webkit-transform: scale(1); opacity: 1; top: 10px; }
90% { opacity: 0; top: 10px; }
99% { -webkit-transform: scale(0); top: 150px; }
100% { -webkit-transform: scale(0); }
}
@-moz-keyframes fade {
0% { -moz-transform: scale(1); opacity: 1; top: 10px; }
90% { opacity: 0; top: 10px; }
99% { -moz-transform: scale(0); top: 150px; }
100% { -moz-transform: scale(0); }
}
.ani-spin1-expand { 0% { .transform(rotate(0 - @d1)); } 60% { .transform(rotate(-360deg - @d1)); } 100% { .transform(rotate(-360deg - @d1)); } }
.ani-spin2-expand { 0% { .transform(rotate(0 - @d2)); } 60% { .transform(rotate(-360deg - @d2)); } 100% { .transform(rotate(-360deg - @d2)); } }
.ani-spin3-expand { 0% { .transform(rotate(0 - @d3)); } 60% { .transform(rotate(-360deg - @d3)); } 100% { .transform(rotate(-360deg - @d3)); } }
.ani-spin4-expand { 0% { .transform(rotate(0 - @d4)); } 60% { .transform(rotate(-360deg - @d4)); } 100% { .transform(rotate(-360deg - @d4)); } }
.ani-spin5-expand { 0% { .transform(rotate(0 - @d5)); } 60% { .transform(rotate(-360deg - @d5)); } 100% { .transform(rotate(-360deg - @d5)); } }
.ani-spin6-expand { 0% { .transform(rotate(0 - @d6)); } 60% { .transform(rotate(-360deg - @d6)); } 100% { .transform(rotate(-360deg - @d6)); } }
.ani-spin1-contract { 0% { .transform(rotate(0 - @d1)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin2-contract { 0% { .transform(rotate(0 - @d2)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin3-contract { 0% { .transform(rotate(0 - @d3)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin4-contract { 0% { .transform(rotate(0 - @d4)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin5-contract { 0% { .transform(rotate(0 - @d5)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
.ani-spin6-contract { 0% { .transform(rotate(0 - @d6)); } 50% { .transform(rotate( 360deg)); } 100% { .transform(rotate( 360deg)); } }
@-webkit-keyframes spin1-expand { .ani-spin1-expand }
@-webkit-keyframes spin2-expand { .ani-spin2-expand }
@-webkit-keyframes spin3-expand { .ani-spin3-expand }
@-webkit-keyframes spin4-expand { .ani-spin4-expand }
@-webkit-keyframes spin5-expand { .ani-spin5-expand }
@-webkit-keyframes spin6-expand { .ani-spin6-expand }
@-moz-keyframes spin1-expand { .ani-spin1-expand }
@-moz-keyframes spin2-expand { .ani-spin2-expand }
@-moz-keyframes spin3-expand { .ani-spin3-expand }
@-moz-keyframes spin4-expand { .ani-spin4-expand }
@-moz-keyframes spin5-expand { .ani-spin5-expand }
@-moz-keyframes spin6-expand { .ani-spin6-expand }
@-webkit-keyframes spin1-contract { .ani-spin1-contract }
@-webkit-keyframes spin2-contract { .ani-spin2-contract }
@-webkit-keyframes spin3-contract { .ani-spin3-contract }
@-webkit-keyframes spin4-contract { .ani-spin4-contract }
@-webkit-keyframes spin5-contract { .ani-spin5-contract }
@-webkit-keyframes spin6-contract { .ani-spin6-contract }
@-moz-keyframes spin1-contract { .ani-spin1-contract }
@-moz-keyframes spin2-contract { .ani-spin2-contract }
@-moz-keyframes spin3-contract { .ani-spin3-contract }
@-moz-keyframes spin4-contract { .ani-spin4-contract }
@-moz-keyframes spin5-contract { .ani-spin5-contract }
@-moz-keyframes spin6-contract { .ani-spin6-contract }
}
}
.bsap {
position: fixed;
top: 0;
right: 0;
width: 130px;
margin: 15px;
padding: 10px;
background: rgba(255, 255, 255, .5);
border: 1px solid rgba(0, 0, 0, .1);
}
.bsap:hover { background: rgba(255, 255, 255, .95); }
.bsap a { color: #555; }
.bsap a:hover { color: #000; }
.bsa_it_t {
font-size: 14px;
display: block;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.bsa_it_d {
font-size: 12px;
display: block;
padding: 5px 0;
}
.bsa_it_p { font-size: 10px; }
.bsa_it_p a { opacity: .5; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment