<!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. Centos出现-bash: unzip: command not found的解决办法

    利用unzip命令解压缩的时候,出现-bash:  unzip: command not found的错误. unzip——命令没有找到,其原因肯定是没有安装unzip. 利用一句命令就可以解决了.  ...

  2. android应用程序的混淆打包

    android应用程序的混淆打包 1 . 在工程文件project.properties中加入下proguard.config=proguard.cfg , 如下所示: target=android- ...

  3. 下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决

    在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > ...

  4. python3异常处理 try

    一. 简介 在编程过程中为了增加友好性,在程序出现Bug时一般不会直接将错误信息展示给用户,而是提供一个友好的输出提示. 二. 使用 1.异常基础 常用结构: try: pass except Exc ...

  5. 腾讯云 利用php + apache + mysql 搭建服务器环境

    1.一键安装需要的软件源 yum install -y httpd php php-fpm mysql mysql-server php-mysql 1) httpd 即为 apache 2)php  ...

  6. c# 测试方法执行时间

    class Program { static void Main(string[] args) { Console.WriteLine(ActionExtension.Profiler(a, )); ...

  7. tensorflow进阶篇-3

    #-*- coding:utf-8 -*- #Tensorflow的嵌入Layer import numpy as np import tensorflow as tf sess=tf.Session ...

  8. 【转】asp.net mvc（模式）和三层架构（BLL、DAL、Model）的联系与区别

    原文地址:http://blog.csdn.net/luoyeyu1989/article/details/8275866 首先,MVC和三层架构,是不一样的. 三层架构中,DAL(数据访问层).BL ...

  9. 前端知识概述----公司内部的一次分享 分类： JavaScript HTML+CSS 2015-04-16 21:24 2593人阅读 评论(2) 收藏

    因为公司内部一个纯后端团队要做一些适合自己团队的web页面,所以就有了这次分享.知识都是很基础,有的知识也只是做了解简单介绍.主要是想让大家对前端有一个基本的了解.现在做一个总结.欢迎大家拍砖. 知识 ...

  10. 关于Item

    0.Item The base class of all items, which implements default behavior. 项(Item)代表一个字节码中可以寻址的实体,有许多种类的 ...