//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. java解压缩.gz .zip .tar.gz等格式的压缩包方法总结

    1..gz文件是linux下常见的压缩格式.使用 java.util.zip.GZIPInputStream即可,压缩是 java.util.zip.GZIPOutputStream public s ...

  2. js05

    继续学习js,在这里我们主要讲述一下js的BOM(浏览器对象模型)以及一些js库和应用这些js库的方法. 1.浏览器对象模型(BOM):    window对象:        表示浏览器窗口,所有的 ...

  3. kafka 消费者offset记录位置和方式

    我们大家都知道,kafka消费者在会保存其消费的进度,也就是offset,存储的位置根据选用的kafka api不同而不同. 首先来说说消费者如果是根据javaapi来消费,也就是[kafka.jav ...

  4. 【树】Unique Binary Search Trees II

    题目: Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. F ...

  5. invokespecial与invokevirtual指令的区别

    package com.test19; class Father { public void publicMethod() { privateMethod(); // this是Son对象,调用Fat ...

  6. asp.net四中绑定方式

    ASP.NET Eval四种绑定方式: 1.1.x中的数据绑定语法 <asp:Literal id="litEval2" runat="server" T ...

  7. 一个非常好用的图片切割工具（c# winform开发）

    本人业余时间开发了一个图片切割工具,非常好用,也很灵活! 特别对大型图片切割,更能体现出该软件的优势! 功能说明 可以设定切割的高度和宽度.切割线可以上下拖动,可以增加一个切割区域,可设定某个区域不参 ...

  8. 05-python中的异常

    python的所有的异常都继承自基类: Exception 处理方式和java类似: path = raw_input('input the path') array = path.split('/' ...

  9. C#合并两个Dictionary的方法

    直接代码: public Dictionary<string, string> MergeDictionary(Dictionary<string, string> first ...

  10. 既之前的基础，先写个简单的PHP 与数据库 的数据交流

    程序分三个板块, 现在先不用 css 和 javascript     先用纯 html  php  写吧. 所以那些 嵌入式 <font  size=....  什么的看看就算了,不推荐如此使 ...