一个简单的返回顶部按钮

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3131 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

源码

黄油

预览

按钮

6 条回复 • 2016-05-01 15:15:40 +08:00

Syc

2016-05-01 07:46:39 +08:00 via Android

mark

LPeJuN6lLsS9

2016-05-01 09:11:02 +08:00

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

KKKKKK

2016-05-01 09:14:06 +08:00 via Android

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

dianjames

2016-05-01 13:39:48 +08:00 via Android

@KKKKKK 并不是乃木坂

bbfly8

2016-05-01 14:48:02 +08:00

改一下，直接用了

（￣ c ￣） y▂ξ

bbfly8

2016-05-01 15:15:40 +08:00

链接 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>