一个简单的返回顶部按钮

[muziyue]

预览： http://moonlib.com/moeback
源码： https://github.com/Mooooooon/moeback



图片来源是一个日本黄油的官网（只测试了chrome

[Syc]

mark

[LPeJuN6lLsS9]

看上去圆环改了，人物改了，文字提示也改成箭头了

[KKKKKK]

这个不是缘之空里面的那个女仆吗？

[dianjames]

@KKKKKK 并不是乃木坂

[bbfly8]

改一下，直接用了



（￣ c ￣） y▂ξ

[bbfly8]

链接 hover 会动哦~
粘贴到： http://www.runoob.com/runcode 测试


<style type="text/css">
#bbfly8 {
background-color: #389FFF;
padding: 10px;
text-align: center;
z-index: 999;
position: fixed;
right: 50px;
bottom: 44px;
}
#bbfly8 a{
text-decoration: none;
font-family: cursive;
font-size: xx-small;
font-weight: normal;
color: lightcyan;
text-shadow: 1px 0 1px #CC6A71, 0 1px 1px #CC6A71, 0 -1px 1px #CC6A71, -1px 0 1px #CC6A71;
}

/* Wobble Top */
@-webkit-keyframes hvr-wobble-top {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

@keyframes hvr-wobble-top {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

.hvr-wobble-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active {
-webkit-animation-name: hvr-wobble-top;
animation-name: hvr-wobble-top;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
</style>

<div id='bbfly8'>
<a class='hvr-wobble-top' href='http://live.fc2.com/47256836/' rel='rl'>FC2-Live</a><br/>
<a class='hvr-wobble-top' href='https://www.v2ex.com/notifications' rel='rl'>V2EX</a><br/>
<a class='hvr-wobble-top' href='https://mail.google.com/mail/u/0/?tab=wm#inbox' rel='rl'>E-mail</a><br/>
</div>