序列帧动画-练习

最近有个客户想要做一个热点图片，但我对动画没有太多的接触，经过这几天的研究和上网查找资料，终于作了出序列帧动画。

图片地址：图片下载

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>序列帧动画练习一</title>
    <!--如果图片是单行排列   那他的每帧百分比可以不细分-->
    <style type="text/css">
        .girl {
                background: url('hotspot.png');/*图片的宽高为128 3200px*/
                 /*  务必设置box的宽度，这样其他不在box中就不会显示*/
                background-size: 128px 3200px;/*表示在图片标签中显示的宽高  一般是序列帧图片的宽高或者他的倍数    3200px / 128px  == 25 */
                -webkit-animation: demo 2s steps(25) infinite; /*steps（25）表示设置25步完成动画*/
                width: 128px;
                height: 128px;
            }
            @-webkit-keyframes demo {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: 0px -3200px;
                } /*设置背景图的位置从0 到-3200px  -表示图片向上移*/
            }
    </style>
</head>
<body bgcolor="gray">
    <div  class="girl" style="top: 38%;left: 36%;position: absolute;">
</body>
</html>

 之后我也在网上找了一些案例，我把文件放在这里，有兴趣的朋友可以看看

序列帧动画下载

第一个是自己写的案例 ， 第二三个是在网上找别人的但是原网我忘了（日后找到了我会将原网地址放上）。

（ps: 这是我的第一篇博文，还不太会操作）17:24:12

 

posted @ 2017-10-16 16:32  蓝狼墨竹  阅读(1070)  评论(0)    收藏  举报