//count down from 5 to 1, a useful animation. show the code to you:
 
<!DOCTYPE html>
<html>
<style>
#contain {
  width: 400px;
  height: 300px;
  overflow: hidden;
}
 
#pic {
height: 1200px;
  animation: switch 5s ease-out infinite;
}
 
#pic > img {
  float: top;
  width: 400px;
  height: 300px;
}
 
@keyframes switch {
  0%, 20% {
    margin-top: 0;
  }
  20%, 40% {
    margin-top: -300px;
  }
  40%, 60% {
    margin-top: -600px;
  }
  60%, 80% {
    margin-top: -900px;
  }
  80%, 100% {
    margin-top: -1200px;
  }
}
</style>
<body>
<div id="contain">
<div id="pic">
<img src="5.png" />
<img src="4.png" />
        <img src="3.png" />
        <img src="2.png" />
        <img src="1.png" />
</div>
</div>
</body>
</html>

倒计时5，4，3，2，1css实现(count down from 5 to 1 using css)的更多相关文章

  1. （JavaScript实现）页面无操作倒计时退出

    项目前端页面需要实现,页面没人操作进入倒计时,以下为前端代码实现. //设置(倒计时功能)开关 var _mouseActiveListener_flag = true; beforecount:触发 ...

  2. js 验证码倒计时

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【IOS 开发】基本 UI 控件详解 (UIDatePicker | UIPickerView | UIStepper | UIWebView | UIToolBar )

    转载注明出处 : http://blog.csdn.net/shulianghan/article/details/50348982 一. 日期选择器 (UIDatePicker) UIDatePic ...

  4. iOS点击获取短信验证码按钮

    概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细 代码下载:http://www.demodashi.com ...

  5. 常用的功能封装 pool.js

    //import { setInterval } from "timers"; //获取最大值 function getMax(){ var max = arguments[0]; ...

  6. JQuery_元素样式操作

    元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握.  一.css()方法 ...

  7. Slide-卡盘效果

    <div style="width:950px;height:705px;"> <div class="J_TWidget" data-wid ...

  8. 近期H5项目开发小结

    前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动).主要是新品牌的推广需要,当然也有给公司以前老客户做的案例.今天主要总结下为新品牌开发的2个h5推广:就 ...

  9. JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

      前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...

随机推荐

  1. ffmpeg开发基础知识

    1.音频采集 面临的问题:延时敏感,噪声消除,回声消除,静音检测 主要参数: 采样率,位宽,声道数,音视频帧 采样率: 也称为采样速度或者采样率,定义了每秒从连续信号中提取并组成离散信号的采样个数,它 ...

  2. C++基础知识 基类指针、虚函数、多态性、纯虚函数、虚析构

    一.基类指针.派生类指针 父类指针可以new一个子类对象 二.虚函数 有没有一个解决方法,使我们只定义一个对象指针,就可以调用父类,以及各个子类的同名函数? 有解决方案,这个对象指针必须是一个父类类型 ...

  3. 【Oracle】数据泵导入导出

    数据泵 expdp导出 nohup expdp  system/******** dumpfile=lysb_20121113_%U.dmp directory=dmp_dir schemas=sco ...

  4. python-在定义函数时，不定长参数中，默认值参数不能放在必选参数前面

    如果一个函数的参数中含有默认参数,则这个默认参数后的所有参数都必须是默认参数,否则会报错:SyntaxError: non-default argument follows default argum ...

  5. Aop学习笔记系列一

    一.Aop解决了什么问题? 1.在说解决了什么问题之前,先介绍一些关键的知识点 a.功能需求:功能需求指项目中的增值需求,比如业务逻辑,UI,持久化(数据库). b.非功能需求:项目中次要的,但却不可 ...

  6. CentOS7 配置 Redis Sentinel主从集群配置

    Redis Sentinel主从集群 环境.准备 slave配置 sentinel配置 测试 C#连接Redis Sentinel 1.环境.准备 单实例3台CentOS7服务器,IP地址.: 192 ...

  7. php 实现繁体转简体代码效率对比

    第一份代码: <?php Header("Content-Type:text/html;charset=utf-8"); function microtime_float() ...

  8. php通过生成动态变量(变量名中还有变量)

    借鉴:http://blog.sina.com.cn/s/blog_7193eeac0100zwld.html 如果想for循环生成变量 如: $a1,$a2,$a3.... $name = &quo ...

  9. clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  10. github删除仓库

    有的时候github的仓库创建错误了,不用了,想删除仓库 1.进入仓库,选择设置 2.拉到最下面,有一个Delete this repository删除仓库按钮,点击 3.输入需要删除的仓库的名称,直 ...