<!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. Android自定义控件（四）——让每一个Activity UI都具有弹性

    前面我们已经介绍了如何让你的ScrollView,ListView具有弹性, 今天,我们在前面的基础上,做一下适当的修改,让那些既不是ScrollView,也不是ListView的Activity页面 ...

  2. nginx使用keepalived实现高可用

    环境: 主:linux-node1  110.0.0.137 备:linux-node2  110.0.0.138   VIP: 110.0.0.120   NGINX安装: # rpm -ivh h ...

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

    1.返回上一个活动只需要按一下Back键,还有一个startActivityForResult()方法也是 用于启动活动,这个方法期望在活动销毁时能够返回一个结果给上一个活动. 2.startActi ...

  4. android default_workspace.xml

    //default_workspace.xml中,支持的标签有: favorite:应用程序快捷方式. shortcut:链接,如网址,本地磁盘路径等. search:搜索框. clock:桌面上的钟 ...

  5. UIImageView填充模式（contentMode）

    UIViewContentModeScaleToFill :拉伸填充UIImageView满屏          UIViewContentModeScaleAspectFit :拉伸到合适UIIma ...

  6. OD调试4--去除NAG窗口

    OD调试4--去除NAG窗口 nag本意是烦人的意思,nag窗口是软件设计者用来时不时提醒用户购买正版的警告窗口.软件设计者可能认为当用户忍受不了试用版中的这些烦人的窗口时,就会考虑购买正式版本. 一 ...

  7. 学习unity的第一个小游戏(Roll the ball)的笔记

    1.摄像机的跟随运动,逻辑就是保持摄像机跟主角的距离不变(Undate()函数). offset=trandform.position-player.position. Undate() { tran ...

  8. sqlserver2005重新安装(安装汇编错误,安装程序无法连接到数据库服务进行服务配置)

    2014-01-09 16:41 1687人阅读 评论(1) 收藏 举报 分类: 数据库(1) 版权声明:本文为博主原创文章,未经博主允许不得转载. sqlserver2005重新安装(安装汇编错误, ...

  9. keydown和keypress

    常见的键盘事件是keyup和keydown.淡蓝就经常用 document.onkeyup = function (e) { if ((e.keyCode || e.which) === 13) // ...

  10. WordPress页面函数功能代码调用大全

    WordPress模板基本文件 style.css 样式表文件index.php 主页文件single.php 日志单页文件page.php 页面文件archvie.php 分类和日期存档页文件sea ...