//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. iOS-消除CocoaPods内容警告

    前言 2018年2月26日 农历正月十一 星期一 今天就想更新下博客,内容不多,心情复杂: 突然想吟诗一首: 其实,我是一个善良的人: 其实,我是一枚... 算了,还是说正事吧 消除CocoaPods ...

  2. Error: java.lang.NullPointerException at outputformat.MysqlOutputFormat.getRecordWriter(MysqlOutputFormat.java:27)

    Error: java.lang.NullPointerException at outputformat.MysqlOutputFormat.getRecordWriter(MysqlOutputF ...

  3. grep常用用法

    grep常用用法 [root@www ~]# grep [-acinv] [--color=auto] '搜寻字符串' filename 选项与参数: -a :将 binary 文件以 text 文件 ...

  4. 【jQuery源码】preFilter

    preFilter: { "ATTR": function( match ) { //属性名解码 match[1] = match[1].replace( runescape, f ...

  5. 《Android应用性能优化》2——内存、CPU、性能测评

    4.高效使用内存 4.1 说说内存 Android设备的性能主要取决于以下三因素: CPU如何操纵特定的数据类型: 数据和指令需占用多少存储空间: 数据在内存中的布局 4.2 数据类型 int和lon ...

  6. IRing项目开发

    最近在做一个应用,名字我把它命名为IRing. 这是一款管理手机铃声的软件,主要目的是将白天和晚上的铃声设置进行区分,为用户提供方便.

  7. Centos 6.5下的OPENJDK卸载和SUN的JDK安装、环境变量配置

    不多说,直接上干货! 说明 图形界面安装,会自带有Centos6.5自带的OPRNJDK!!! *********************************自带的OPENJDK的卸载****** ...

  8. 关于注解Annotation第一篇

    注解的定义格式如下: public @interface 注解名 {定义体} 定义体就是方法的集合,每个方法实则是声明了一个配置参数.方法的名称作为配置参数的名称,方法的返回值类型就是配置参数的类型. ...

  9. Python -- Gui编程 -- Qt库的使用 -- 菜单与对话框

    1.菜单 import sys from PyQt4 import QtCore, QtGui class MyWindow(QtGui.QMainWindow): def __init__(self ...

  10. __name__ == "__main__"的作用是什么？

    问题: __name__ == "__main__" 的作用是什么? # Threading example import time, thread def myfunction( ...