<!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. PCM文件格式简单介绍

    PCM文件格式简单介绍 PCM文件:模拟音频信号经模数转换(A/D变换)直接形成的二进制序列,该文件没有附加的文件头和文件结束标志.Windows的Convert工具能够把PCM音频格式的文件转换成M ...

  2. Div与table的区别

    1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...

  3. JavaScript 函数基础

    1. JavaScript 函数基础 1. 定义方法 2. 函数的调用方法 3. 函数方法 apply : 将函数作为数组的方法来调用 将参数以数组形式传递给该方法 call   : 将函数作为对象的 ...

  4. 此项目的默认Web访问模式设置为文件共享, 但是无法从路径(此为转贴)

    故障现象: 当你打开ASP.NET Web项目时,如果出现这样的错误提示:提示窗口标题: Web访问失败提示内容: 此项目的默认Web访问模式设置为文件共享, 但是无法从路径“...”打开“...”处 ...

  5. unity 之2D游戏简单操作

    unity 做2D项目也很方便.  首先要调整camera的模式,camera 的检视面板参数如下: perspective 模式就是平时用的 模式.摄像机到游戏物体是有角度的张开, 而 orthog ...

  6. poj2378 树形DP

    C - 树形dp Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65536KB     64bit ...

  7. hdu 1215 七夕节

    Problem Description 七夕节那天,月老来到数字王国,他在城门上贴了一张告示,并且和数字王国的人们说:"你们想知道你们的另一半是谁吗?那就按照告示上的方法去找吧!" ...

  8. Java中，&&与&；||与|的区别

    我们很多人在学习Java的时候,或者其他语言(如:C#,.Net等)都会遇到&和&&,|和||.然而,如果你没有真正理解他们的意思,这回给你的思路上带来很大的麻烦.在Java的 ...

  9. ubuntu中安装openssh-server失败（首先ubuntu不能远程root登录）

      ubuntu 安装openssh-server时,报依赖错误   解决方法: 更新软件 sudo apt-get update   如果报校验和不符错误:(此错误为部分网址被墙)如图 解决方法如下 ...

  10. Hibernate学习笔记（一）：mycelipse建立项目流程（未完成）

    1.部署数据库: 2.部署项目: 3.引入Hibernate: 4.url配置