当前位置：网站首页>记录下bilibili(b站)小火箭页面上划动画效果的实现

记录下bilibili(b站)小火箭页面上划动画效果的实现

2022-06-09 12:24:00 【未成年梦想】

突发

觉得这种bilibili小火箭很有意思,想看看怎么实现的,发现是精灵图来实现的
具体的期末考试完成后在学习~
css中animation的steps分步动画

效果

哔哩哔哩小火箭效果

素材

rocket_top

rocket_frame

代码

这里暂时只实现了动画效果,滚动到顶部等我期末考试完成后补充~

<!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>