<!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. const与define的异同

    1. DEFINE是预处理指令,是简单的文字替换:而const是关键字,用于变量声明的修饰. 2. DEFINE替换的结果可以是数值.表达式.字符串.甚至是一个程序:而const只能限定变量为不可修改 ...

  2. 2.4 Git 基础 - 撤消操作

    2.4 Git 基础 - 撤消操作 撤消操作 任何时候,你都有可能需要撤消刚才所做的某些操作.接下来,我们会介绍一些基本的撤消操作相关的命令.请注意,有些撤销操作是不可逆的,所以请务必谨慎小心,一旦失 ...

  3. FineUI页面布局

    使用布局的优势 相对于为控件设置固定的宽度和高度,布局的重要意义在于子控件可以根据父控件的尺寸自动设置自己的尺寸,在页面尺寸改变时同样有效.如果你在项目中遇到类似如下的需求,就需要考虑布局了: 面板填 ...

  4. C#在局域网中连接Liunx上的MySql数据库

    前期准备工作: 我所用的平台是VS2010和Ubuntu 14.04.3  LTS 一.由于MySql并没有集成在VS2010中所以要先安装MySQL Connector Net 6.9.8连接工具, ...

  5. java web实现读取指定盘符下的图像（二）

    之前写了一篇文章是关于如何读取指定盘符下的图片,虽然功能可以实现,但是使用的是I/O流的方式,效率不高.现在发现还有一个更好的办法,使用也更加的方便. 我们知道,当我们的图片是放在tomcat下web ...

  6. 【mac osx安装opencv，python总结】

    在macosx下安装opencv,最大的困难在于协调python版本.由于在opencv官网上,强烈建议安装完整版的python(不建议使用mac 内置的python),所以会碰到这个多个python ...

  7. 严重: Exception starting filter struts2 --Unable to load configuration

    严重: Exception starting filter struts2 Unable to load configuration. - [unknown location] at com.open ...

  8. OpenCV——手势识别

    使用ANN神经网络训练数据后进行手势识别. #include "header.h" int main() { ; //训练每类图片数量 ; //训练类数3:石头剪刀布 ; ; st ...

  9. redis的特色

    总结一下redis的特点: 1.独特的键值对模型 很多数据库只能处理一种数据结构:     • SQL 数据库 —— 表格     • Memcached —— 键值对数据库,键和值都是字符串     ...

  10. hadoop集群中的日志文件

    hadoop存在多种日志文件,其中master上的日志文件记录全面信息,包括slave上的jobtracker与datanode也会将错误信息写到master中.而slave中的日志主要记录完成的ta ...