仿b站返回顶部小火箭

chen'mo

2021-06-19 / 0 评论 / 4,100 阅读 / 正在检测是否收录...

06/19

温馨提示：

本文最后更新于2021年06月18日，已超过1410天没有更新，若内容或图片失效，请留言反馈。

bilibili右下角返回顶部按钮样式源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .back-to-top {
                background-image: url("https://cdn.jsdelivr.net/gh/cetr/cdn@master/blog/img/space-to-top.png");
                width: 62px;
                height: 88px;
            }

            .back-to-top:hover {
                animation: to-top-fly .4s steps(1) infinite;
            }

            @keyframes to-top-fly {
                0% {
                    background-position-x: -142.5px;
                }

                16.5% {
                    background-position-x: -284.5px;
                }

                33% {
                    background-position-x: -429.5px;
                }

                49.5% {
                    background-position-x: -570.5px;
                }

                66% {
                    background-position-x: -714.5px;
                }

                82.5% {
                    background-position-x: -856.5px;
                }

                100% {
                    background-position-x: 0px;
                }
            }
        </style>
    </head>
    <body>
        <div class="back-to-top"></div>
    </body>
</html>

转载于：知雨

最后修改： 2021年06月18日 11:04

来源网址： https://coor.top/archives/21011814

仿b站返回顶部小火箭

评论 (0)