Html
    Css
    Js
#rbutton {
	position:fixed;
	right:0px;
	top:50%;
	width:80px;
	height:80px;
	transition:right 1s;
	z-index:999;
}
#rot {
	position:absolute;
	top:0px;
	animation:rot 8s linear infinite;
}
circle[Attributes Style] {
	r:33;
	cx:40;
	cy:40;
	stroke:green;
	stroke-width:1;
	fill:transparent;
}
circle[Attributes Style] {
	r:5;
	cx:35;
	cy:6;
	fill:green;
}
circle[Attributes Style] {
	r:26;
	cx:50%;
	cy:50%;
	fill:green;
}
#rot2 {
	position:absolute;
	top:0px;
	animation:rot 12s linear infinite;
}
circle[Attributes Style] {
	r:33;
	cx:40;
	cy:40;
	stroke:green;
	stroke-width:1;
	fill:transparent;
}
circle[Attributes Style] {
	r:6;
	cx:6;
	cy:40;
	fill:green;
}
@-webkit-keyframes rot {
	0% {
	-webkit-transform:rotatez(0deg) rotatez(180deg);
}
100% {
	-webkit-transform:rotatez(180deg) rotatez(360deg);
}
}#rbutton .in a {
	position:absolute;
	left:20px;
	top:20px;
	width:40px;
	height:40px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	line-height:1;
	font-size:16px;
	text-decoration:none;
	color:#fff;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

右侧弹窗悬浮动画效果(原创)

js控制div-rbutton到达顶部会隐藏一半。需要用的可以自己调。。

0