很好看的哔哩哔哩的关注按钮代码來了,有興趣可以放在自己網站/博客~
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>模仿Bilibili关注的动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bangumi-order-d{
background: url(http://s1.hdslb.com/bfs/static/bangumi/play/images/anim-order.png);
display: inline-block;
position: absolute;
margin: 60px;
margin-left: 4px;
top: -20px;
width: 60px;
height: 60px;
line-height: 28px;
vertical-align: middle;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<i class="bangumi-order-d" style="background-position: -1860px -60px;"></i>
<script>
var w = 0;
var i = -1;
$('.bangumi-order-d').click(function(e){
animat($(this),0);
})
function animat($img,w){
setTimeout(() => {
$img.css("background-position","-"+ w +"px -60px")
if(w<1860){
w=w+60;
animat($img,w);
}else{
w=0
}
}, 66);
}
</script>
</body>
</html>