<!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--获取当前系统的语言环境

    private boolean isZh() {        Locale locale = getResources().getConfiguration().locale;         St ...

  2. BULK INSERT如何将大量数据高效地导入SQL Server

    转载自:http://database.51cto.com/art/201108/282631.htm BULK INSERT如何将大量数据高效地导入SQL Server 本文我们详细介绍了BULK ...

  3. WIN7中组件服务中的DCOM配置找不到Microsoft Excel应用程序的解决办法

    转自:http://blog.csdn.net/lploveme/article/details/8215265 在运行栏中输入命令:dcomcnfg,打开组件服务管理窗口,但是却发现找不到Micro ...

  4. C#类型基础——学习笔记一

    1.C#中的类型一共分两类,一类是值类型,一类是引用类型.2.结构类型变量本身就相当于一个实例.3.调用结构上的方法前,需要对其所有的字段进行赋值.4.所有元素使用前都必须初始化.5.(结构类型)ne ...

  5. Python提取图片的ROI

    图像处理经常需要提取图片的ROI,本文使用Python提取图片的ROI. 使用的Module是PIL (Pillow),一个图像处理库,用到的函数为类 Image 中的 crop 方法. 函数原型为: ...

  6. winPcap_6_不用回调方法捕获数据包

    用 pcap_next_ex() 函数代替 _5_ 中的 pcap_loop()函数: pcap_loop()函数是基于回调的原理来进行数据捕获,这是一种精妙的方法,并且在某些场合中,它是一种很好的选 ...

  7. No1_6.字符串的基本操作2_Java学习笔记

    import java.util.Scanner; import java.util.regex.Pattern; public class HelloString2 { public static ...

  8. Kendo Web UI Grid里时间格式转换

    我和大家分享一下我的kendo的学习心得.如果不好的地方多多包含或者给我留言请看图 kendo里时间格式如图Oder Date列里的格式.但是我们想把时间转换成中国人习惯的格式.如Shipped Da ...

  9. html5 百分比计算

    这几天一直在看html5,看到了百分比的计算公式:目标元素的尺寸/上下文元素的尺寸=百分比尺寸.看到这个公式,有点懂,但是有不明白.对于目标元素很容易理解,但是对于上下文元素就不是很好理解了.试了一些 ...

  10. 转载：s:if的用法

    转载网址:http://blog.csdn.net/menhuanxiyou/article/details/5709550 1:直接写表达式 <s:set name="china&q ...