设为首页 加入收藏

TOP

序列帧动画-练习
2017-10-16 18:19:14 】 浏览:5722
Tags:序列 动画 练习

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

图片地址:图片下载

代码如下:

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

 


编程开发网
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇【css】css2实现两列三列布局的方.. 下一篇JavaScript笔记(第一章,第二章)

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

array(4) { ["type"]=> int(8) ["message"]=> string(24) "Undefined variable: jobs" ["file"]=> string(32) "/mnt/wp/cppentry/do/bencandy.php" ["line"]=> int(214) }