[CSS] CSS Transitions: Delays and Multiple Properties

最新推荐文章于 2025-03-25 13:23:29 发布

转载最新推荐文章于 2025-03-25 13:23:29 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5242369.html

文章标签：

#javascript #ViewUI

本文介绍了一个名为WombatRevealer的效果实现方法。通过使用HTML、CSS和jQuery技术，实现了图片展示区域覆盖层点击后旋转显示隐藏内容的功能。文章提供了一个具体的示例，展示了如何设置覆盖层样式及交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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: 0;
  transform: rotate(180deg);
}

jQuery('.cover').click(function(e) {
  var target = jQuery(e.currentTarget);
  target.toggleClass('open');
});

转载于:https://www.cnblogs.com/Answer1215/p/5242369.html