//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. class字节码结构（三）（字段集合的结构）

    <Java虚拟机原理图解>1.4 class文件中的字段表集合--field字段在class文件中是怎样组织的 字段区:包括了字段计数器和字段数据区: 字段是指在类中定义的静态或者非静态的 ...

  2. 《JAVA与模式》之模板方法模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...

  3. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  4. （转）一个MySQL 5.7 分区表性能下降的案例分析

    一个MySQL 5.7 分区表性能下降的案例分析 原文:http://www.talkwithtrend.com/Article/216803 前言 希望通过本文,使MySQL5.7.18的使用者知晓 ...

  5. web测试总结—用户体验

    一.什么是用户体验 用户体验,英文叫做user experience,缩写为UE,或者UX.一个较常见的定义是“指用户访问一个网站或者使用一个产品时的全部体验.他们的印象和感觉,是否成功,是否享受,是 ...

  6. ES6-Array

    /* * 数组解构赋值: * ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这种被称为解构. * 示例如下: */ var [a,b,c] = [1,2,3]; console.log ...

  7. UTF8最好不要带BOM

    摘自:http://www.cnblogs.com/findumars/p/3620078.html   几周前还在为BOM的问题苦恼着...正如@梁海所说,“不含 BOM 的 UTF-8 才是标准形 ...

  8. mongodb-地理坐标存储查询

    mongodb可支持空间地理搜索: 查询器 $geoWithin Selects geometries within a bounding GeoJSON geometry. The 2dsphere ...

  9. WPF中定义TabItem的可选区域(特别是当使用Label来呈现Header时)

    1. 如上图,所示,此时当鼠标移入蓝色框内除文字部分,整个TabItem是没反应的 经过查看代码可以看到: 将图标中的VerticalAlignment="Center"和Hori ...

  10. Linux下最常用的Shell命令的介绍

    Shell基础: 你可以通过打开Linux的terminal(终端)来执行Shell命令.Shell的种类有很多种,例如CSH,Bourne Shell,Korn Shell.在现在的大多数Linux ...