突发

效果

哔哩哔哩小火箭效果

素材

rocket_top

rocket_frame

代码

  • 基础动画效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili小火箭</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .rock {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 150px;
            height: 174px;
            background-image: url("img/rocket_top.png");
            overflow: hidden;
        }

        .rock:hover {
            background-image: url("img/rocket_frame.png");
            animation: rockMove steps(4) .4s infinite;
        }
        @keyframes rockMove {
            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;
            }
        }
    </style>
</head>

<body>
    <div class="rock fly">

    </div>
</body>

</html>
  • 带js滚动到顶部效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili小火箭</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,html {
            width: 100%;
            height: 1500px;
        }

        .rock {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 150px;
            height: 174px;
            background-image: url("img/rocket_top.png");
            overflow: hidden;
            display: none;
        }

        .rock:hover {
            background-image: url("img/rocket_frame.png");
            animation: rockMove steps(4) .4s infinite;
        }

        @keyframes rockMove {
            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;
            }
        }
    </style>
</head>

<body>
    <div class="rock fly">
        
    </div>
    <script>
        // 获取当前视口的大小
        var viewHeight = document.documentElement.clientHeight;
        //小火箭添加单击事件
        document.querySelector(".rock").addEventListener("click", () => {
            //小火箭被单击,回到顶部
            // document.documentElement.scrollTop = 0;
            //当然,也可以慢慢回到顶部
            slowToTop();
        })
        //当然,这里使用节流会更好
        window.onscroll = function () {
            if (document.documentElement.scrollTop >= viewHeight) {
                //显示小火箭元素
                document.querySelector(".rock").style.display = "block";
            } else {
                //隐藏小火箭
                document.querySelector(".rock").style.display = "none";
            }
        }
        window.onresize = function () {
            viewHeight = document.documentElement.clientHeight;
        }
        /* 缓慢回到顶部 */
        function slowToTop() {
            setTimeout(() => {
                let value = document.documentElement.scrollTop;
                if(value<=0){
                    document.documentElement.scrollTop = 0;
                }else{
                    document.documentElement.scrollTop -= 80;
                    slowToTop();
                }
            }, 1000/50);
        }
    </script>
</body>

</html>