效果图
jQuery.gif
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/pifu.css" />
</head>
<body>
<!--<div>
<span class="fa fa-cog fa-4x fa-spin"></span>
</div>-->
<div id="pfk">
<div class="pfys">
<i class="fa fa-cog fa-spin" aria-hidden="true"></i>
<a class="pfysA pfy1" name="#222222"></a>
<a class="pfysA pfy2" name="#f4f4f4"></a>
<a class="pfysA pfy3" name="#343a40"></a>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/pifu.js" ></script>
</html>
pifu.js
$(document).ready(function(){
if (typeof localStorage.bgColor=='undefined') {
$("body").css("background-color","#f4f4f4")
} else{
$("body").css("background-color",localStorage.bgColor)
}
});
$(".pfysA").click(function(){
$("body").css("background-color",$(this).attr("name"));
localStorage.bgColor=$(this).attr("name")
});
pifu.css
.pfys{
width:38px;
line-height:38px;
height:38px;
position:fixed;
right:0;
background-color:#fff;
top:120px;
text-align:center;
-webkit-box-shadow:1px 1px 1px #000;
box-shadow:1px 1px 1px hsla(0,0%,0%,.3);
border-top-left-radius:3px;
border-bottom-left-radius:3px;
transition:all .8s ease 0s;
overflow:hidden;
}
.pfys:hover{
height:108px;
color:#008afc;
}
.pfys i{
transition:all .8s ease 0s;
}
.pfys:hover.pfys i{
transform:rotate(360deg);
}
.pfys a{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:7px;
border-radius:3px;
}
.pfy1{
background-color:#222;
width:15px;
height:15px;
}
.pfy2{
background-color:#f4f4f4;
/*border:1px solid #d8d8d8;*/
width:15px;
height:15px;
}
.pfy3{
background-color:#343a40;
/*border:1px solid #d8d8d8;*/
width:15px;
height:15px;
}
.pfys a:hover{-webkit-box-shadow:1px 2px 2px hsla(0,0%,0%,.5)}
