<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

  <h1>Wombat Revealer</h1>

  <div class="item one">

    <div class='cover'>

      <span>Reveal Wombat!</span>

    </div>

    <img src="https://c2.staticflickr.com/6/5290/5262975644_bc61d8702d_b.jpg" width=320 />

  </div>

  <div class="item two">

    <div class='cover'>

      <span>Reveal Wombat!</span>

    </div>

    <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Common_Wombat_(Vombatus_ursinus_tasmaniensis).jpg" width=320 />

  </div>

  <div class="item three">

    <div class='cover'>

      <span>Reveal Wombat!</span>

    </div>

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/1024px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" width=320 />

  </div>

</body>

</html>
.item .cover {

  width: 320px;

  height: 213px;

  background-color: yellow;

  position: absolute;

  transition: opacity 500ms 200ms,

    transform 500ms;

}

.item .cover.open {

  opacity:;

  transform: rotate(180deg);

}
jQuery('.cover').click(function(e) {

  var target = jQuery(e.currentTarget);

  target.toggleClass('open');

});

[CSS] CSS Transitions: Delays and Multiple Properties的更多相关文章

  1. Part 12 Angularjs filter by multiple properties

    In the example below, we are using multiple search textboxes. As you type in the "Search name&q ...

  2. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  3. Effeckt.css – CSS3 Transitions & Animations 精妙应用

    CSS3 不仅仅用作界面效果补充,还可以用来替换传统的一些界面实现,而且效果更酷.Effeckt.css 收集了众多精妙的 CSS3 Transitions & Animations 效果应用 ...

  4. reset.css css重置公共样式

    @charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...

  5. [css] CSS相对定位|绝对定位

    第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...

  6. 一日一练-CSS CSS中percentage百分值的使用

    子曰:学好百分值,考试考百分 首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性,以及这些属性的值如何进行计算的,参考CSS 参考手册进行统计. 定位(Positioning ...

  7. [CSS] css的background及多背景设置

    问题 首先是一个 div 块里需要一张背景,带文本和图案的那种,但是身为容器的 div 是能够随数据的改变而变化长度的,所以一张静态图片不免的会有拉伸和挤扁的状态,尤其是有图案和文本的情况下最为明显 ...

  8. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  9. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

随机推荐

  1. MDM 证书申请流程（vendor及customer）

    整个流程分为两部分:vendor,customer. 一.Vendor 1.成为一个 MDM Vendor 1) 首先你须要拥有一个 Apple Enterprise account($299/年). ...

  2. _js day10

  3. 深入解析MySQL replication协议

    Why 最开始的时候,go-mysql只是简单的抽象mixer的代码,提供一个基本的mysql driver以及proxy framework,但做到后面,笔者突然觉得,既然研究了这么久mysql c ...

  4. sqlite创建数据库问题

    1.<Sqlite权威指南>上说是这么创建数据库的: sqlite3 test.db 但是我写了这条语句之后出现了下面的情况(注:安装Sqlite过程见 ...) 我的sqlite3放在 ...

  5. MySql查看表信息

    SELECT TABLE_NAME, TABLE_COMMENT -- 指定信息列 FROM `information_schema`.`tables` A WHERE A.`TABLE_SCHEMA ...

  6. DEV GridControl 根据单元格值改变背景色

    GridControl 根据单元格值改变背景色(需要用到CustomDrawCell事件) 方法1: private void gdvClient_CustomDrawCell(object send ...

  7. update-database时出现Cannot attach the file

    在进行Migrations时,如果直接删除了Db文件,在使用update-database时会出现Cannot attach the file发问题 解决方案:

  8. 实施双工通信框架:SignalR

    SignalR:基于Asp.net平台构建,利用JavaScript或者Websockets,实现在客户端与服务端异步通信的框架. Html5新规范:WebSocket

  9. 《第一行代码》学习笔记6－活动Activity（4）

    1.SecondActivity不是主活动,故不需要配置标签里的内容. 2.Intent是Android程序中各组件之间进行交互的一种重要方式,一般可被用于 启动活动,启动服务,以及发送广播等.Int ...

  10. web 安全 初探 (正在更新)

    1.web应用程序所采用的防卫机制的几个核心构成:1.处理用户对应用程序的数据和功能的访问,以防止用户未经授权访问.2.处理用户的输入,以防止恶意的输入导致未预期的行为.3.处理攻击,以确保应用程序在 ...