CSS3——制作人物走路的小动画

最新推荐文章于 2022-08-09 10:41:57 发布

子非鱼1210

最新推荐文章于 2022-08-09 10:41:57 发布

阅读量1.1k

点赞数 4

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/gaoquanquan/p/9169291.html

版权

一个很简单的小动画，但是还挺有意思的，就是找这种图片很麻烦，我这里把我找的一张图片贴上来，这张图片是我在网上找的，又改了背景色和大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路</title>
    <style type="text/css">
        .box{
            width:50px;
            height:160px;
            border:1px solid #000;
            margin:50px auto 0;
            overflow:hidden;
            position:relative;
        }

        .box img{
            position: absolute;
            left:0;
            top:0;

            animation:walking 1s steps(10) infinite;
        }

        @keyframes walking{
            from{
                left:0;
            }
            to{
                left:-520px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/1212.png" alt="walking"></div>
</body>
</html>

效果展示:(感觉效果不是特别好，动作的连贯性还不够好，需要改改图片，偷个懒不改啦~)

转载于:https://www.cnblogs.com/gaoquanquan/p/9169291.html

子非鱼1210

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3——制作人物走路的小动画

一个很简单的小动画，但是还挺有意思的，就是找这种图片很麻烦，我这里把我找的一张图片贴上来，这张图片是我在网上找的，又改了背景色和大小。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>走路</tit...
复制链接

扫一扫