<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .ren {

            width: 48px;

            height: 70px;

            background: url(images/timg.jpg) no-repeat;

            animation: donghua 5s steps(10);

            overflow: hidden;

        }

        @keyframes donghua {

            0% {

                background-position: -8px 0;

            }

            100% {

                background-position: -460px 0;

            }

        }

    </style>

</head>

<body>

<div class="ren"></div>

</body>

</html>

animation3 背景小动画笔记的更多相关文章

  1. 【Visual C++】游戏编程学习笔记之六：多背景循环动画

    本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44264153 作者:ZeeCod ...

  2. 如何制作网页小动画？——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  3. 问题杂烩(scrollTop/背景透明度动画)

    今天给同学找我帮忙写js,是公司里的活..我是不是应该跟他要钱哈哈,不过一顿饭肯定是免不了的了. 言归正传,今天写了三个小东西,因为兼容性的问题,用jq写的(很是别扭的说,但是没办法啊,一边看api一 ...

  4. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  5. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  6. TabbarItem超炫小动画

    本文转载自 不灭的小灯灯  的博客 Tabbar点击时候超炫小动画 感谢这位大神的分享! 对UITabBarController上TabBar按钮动画详细介绍-->>保证你有意外收获,如有 ...

  7. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  8. Canvas 图片绕边旋转的小动画

    /** * 图片绕边旋转的小动画 */ function initDemo10() { var canvas = document.getElementById("demo10") ...

  9. 8 Explicit Animations 指明的动画 笔记

    8 Explicit Animations 指明的动画 笔记     If you want something done right, do it yourself. 如果你想让事情做好,那就自动来 ...

随机推荐

  1. performSelector 的缺点

    在内存管理方面容易有缺失.无法确定将要执行的选择子具体是什么,所以 ARC 无法插入适当的内存管理方法 选择子的返回类型只能是 id,最多有两个参数. 所以尽量避免使用这个东西. 下面来自苹果的文档 ...

  2. day 56 linux的安装python3 ,虚拟环境,mysql ,redis

    1.1下载python源码包 网址:https://www.python.org/downloads/release/python-366/ 下载地址:https://www.python.org/f ...

  3. POJ 2291

    #include<iostream> #include<stdio.h> using namespace std; int compare(void const *,void ...

  4. [WiX]Component Rules 101

    原文:http://robmensching.com/blog/posts/2003/10/18/component-rules-101 I've been debating with myself ...

  5. JavaScript中的异步操作

    什么是异步操作? 异步模式并不难理解,比如任务A.B.C,执行A之后执行B,但是B是一个耗时的工作,所以,把B放在任务队列中,去执行C,然后B的一些I/O等返回结果之后,再去执行B,这就是异步操作. ...

  6. jdbc调试sql语句方法

    在main命令行输入三个参数到oracle 的 dept2表(自己建的 和dept一样(deptno,dname,loc)),插入到数据库中去.通过本例子,学习在java里调试sql的方法. 写完sq ...

  7. mysql修改存储过程的权限

    直接上代码 grant execute on procedure 表名.存储过程名(eg: student.find) to '用户名'@'host'(eg: 'volumelicense'@'%') ...

  8. php的数组变量

    数组就是存储同一类型的多个变量的 一种特殊的类型 php的数组有两种形态 1.普通类型 eg:$cars = array("Volvo","BMW"," ...

  9. 在Java Web项目中，不用ActionContext类来获得tomcat部署项目的绝对路径

    例子:sendIosApns.class.getClassLoader().getResource("").getFile().replaceAll("%20" ...

  10. java面试④数据库部分

    2.3.1 数据库的分类及常用的数据库 数据库分为:关系型数据库和非关系型数据库 关系数据库:mysql,oracle,sqlServer 非关系型:redis,mongoDB 2.3.2 简单介绍一 ...