仿B站小火箭发射上升

效果图：

 

 

 

 

 CSS代码块：

 <style type="text/css">

.goTop {
      background-image: url(img/rocket_top.png);
background-repeat: no-repeat;
background-position: center center;
width: 150px;
height: 174px;
position: fixed;
top: 70%;
right: 3%;
display: none;
}
   .goTop span {
       color: #fff;
position: absolute;
top: 12px;
left: 8px;
}
   @keyframes fly{
      0%{
         background-position-x:0 ;
}
      25%{
         background-position-x:-150px ;
}
      50%{
         background-position-x:-300px ;
}
      75%{   
         background-position-x:-450px ;
}
      100%{
         background-position-x:-600px;
         
}
   }
   .goTop:hover{
      animation: fly 0.4s steps(1) infinite;
background-image: url(img/rocket_frame.png);
}
</style>

 

　HTML代码块
　　<img src="img/portfolio-1.jpg" />

<img src="img/portfolio-2.jpg" />
<img src="img/portfolio-3.jpg" />
<img src="img/portfolio-4.jpg" />
<img src="img/portfolio-5.jpg" />
<div class="goTop"></div>

   

  Scrpit代码块

<script>
function goTop(min_height) {
       $(".goTop").click(
           function() {
               $('html,body').animate({
                   scrollTop: 0
}, 700);
});
//获取页面的最小高度，无传入值则默认为600像素
min_height=min_height?min_height:400;
//为窗口的scroll事件绑定处理函数
$(window).scroll(function() {
           //获取窗口的滚动条的垂直位置
var s = $(window).scrollTop();
//当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
if (s > min_height) {
               $(".goTop").fadeIn(300);
} else {
               $(".goTop").fadeOut(300);
}
       });
}    
   $(function() {//调用函数
goTop();
});
</script>