//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. day 56 linux的安装python3 ,虚拟环境,mysql ,redis

    1.1下载python源码包 网址:https://www.python.org/downloads/release/python-366/ 下载地址:https://www.python.org/f ...

  2. 微服务是"银弹"吗？

    前言:所谓"银弹",本意是用金属银做成的子弹:在古老的传说里它是杀死狼人的有效武器.在著作<人月神话>也有描述.微服务是当前软件界流行的名词,那么它能成为像银弹一样厉害 ...

  3. Nginx Web服务(一)

    一.Nginx原理介绍 1.1:什么是Nginx Nginx是一个开源的,支持高性能.高并发的WWW服务和代理服务软件 1.2:Nginx的功能特点及应用场合 ① 支持高并发:能支持几万并发连接,特别 ...

  4. 学习微信小程序及知识占及v-if与v-show差别

    注意点: 一.接口调用方式: getOpenid: function () { var that = this; return new Promise(function (resolve, rejec ...

  5. linux 目录结构+常用命令+压缩命令+vim使用+及基础知识

    linux目录架构 / 根目录 /bin 常用的命令 binary file 的目录 /boot 存放系统启动时必须读取的档案,包括核心 (kernel) 在内 /boot/grub/menu.lst ...

  6. JVM-Java8的MetaSpace

    Java 8 彻底将永久代 (PermGen) 移除出了 HotSpot JVM,将其原有的数据迁移至 Java Heap 或 Metaspace 为什么取消了永久代而用MetaSpace代替了永久代 ...

  7. Elasticsearch入门（一）

    索引(index) -- 存储关联数据的地方.实际上,索引只是一个逻辑命名空间(logical namespace),它指向一个或多个分片(shards). 分片(shard) 是 工作单元(work ...

  8. 解决Nginx 504 Gateway Time-out问题

    解决方案:在http里设置FastCGI相关参数,如: worker_processes 1; events { worker_connections 1024; } http { include m ...

  9. [C++][转]CPU字节序 网络序 主机序 大端小端

    原帖:http://www.cnblogs.com/darktime/p/3298075.html 不同的CPU有不同的字节序类型 这些字节序是指整数在内存中保存的顺序 这个叫做主机序最常见的有两种1 ...

  10. b-树和b+树以及mysql索引

    b-树(m阶): 1.根节点至少有2个子节点; 2.中间节点包含k个子节点和k-1个元素,m/2 <= k <= m; 3.每个节点中的元素从小到大排列,节点当中k-1个元素正好是k个孩子 ...