初学CSS动画之行走的米兔

最新推荐文章于 2022-09-03 00:01:33 发布

猴哥等等我

最新推荐文章于 2022-09-03 00:01:33 发布

阅读量529

点赞数

分类专栏： CSS动画文章标签：动画 css css3

本文链接：https://blog.csdn.net/weixin_40961514/article/details/120912565

版权

CSS动画米兔图片动画背景定位关键帧

关键词由CSDN通过智能技术生成

CSS动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

米兔练习比较经典，利用css中的animation就可以实现

做的步骤如下：

第一步：找到需要使用的米兔图片，如下图：

第二部，打开ps，测量图片的大小，如图：

这里宽为528px，高为271像素

第三部编程实现动画效果，代码如下：

<!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>Document</title>
    <style>
        .box1{
            width: 132px;
            height: 271px;
            background-image: url(图片地址);
            margin: 0 auto;
          
           animation:rabbit 1s steps(3) 10;
        }
     
        @keyframes rabbit{

            from{
                    background-position: 0 0;
                }
            to{ 
                background-position: -396px 0;
                }
                        }
        
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

实现的效果如下：

猴哥等等我

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
初学CSS动画之行走的米兔

米兔练习比较经典，利用css中的animation就可以实现做的步骤如下：第一步：找到需要使用的米兔图片，如下图：第二部，打开ps，测量图片的大小，如图：这里宽为528px，高为271像素第三部编程实现动画效果，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa..
复制链接

扫一扫