45 lines
1.6 KiB
Stylus
45 lines
1.6 KiB
Stylus
|
#backtotop
|
||
|
|
position: fixed;
|
||
|
|
right: 50px;
|
||
|
|
bottom: 50px;
|
||
|
|
display: block;
|
||
|
|
visibility: hidden;
|
||
|
|
width: 42px;
|
||
|
|
height: 43px;
|
||
|
|
background: url(images/backtotop.png) no-repeat 50% 0;
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
||
|
|
-moz-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
||
|
|
transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
||
|
|
@media mq-mobile
|
||
|
|
right: 12px;
|
||
|
|
bottom: 20px;
|
||
|
|
#backtotop i {
|
||
|
|
display: block;
|
||
|
|
margin-top: 48px;
|
||
|
|
height: 14px;
|
||
|
|
background: url(images/backtotop.png) no-repeat 50% -20px;
|
||
|
|
opacity: .5;
|
||
|
|
-webkit-transition: -webkit-transform .2s;
|
||
|
|
-moz-transition: -moz-transform .2s;
|
||
|
|
transition: transform .2s;
|
||
|
|
-webkit-transform-origin: 50% 0;
|
||
|
|
-moz-transform-origin: 50% 0;
|
||
|
|
transform-origin: 50% 0; }
|
||
|
|
#backtotop.show {
|
||
|
|
visibility: visible;
|
||
|
|
opacity: 0.50; }
|
||
|
|
#backtotop.launch {
|
||
|
|
background-position: 50% -44px;
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translateY(-500px);
|
||
|
|
-moz-transform: translateY(-500px);
|
||
|
|
-ms-transform: translateY(-500px);
|
||
|
|
transform: translateY(-500px);
|
||
|
|
pointer-events: none; }
|
||
|
|
#backtotop.launch i {
|
||
|
|
background-position: 50% 100%;
|
||
|
|
-webkit-transform: scale(1.4, 3.2);
|
||
|
|
-moz-transform: scale(1.4, 3.2);
|
||
|
|
transform: scale(1.4, 3.2); }
|