CSS 中的疯狂杂志折叠效果

在Mad Magazine工作了65年后,漫画家Al Jaffee宣布退休。Jaffee最出名的是他的Mad Fold-Ins,折叠页面会揭示艺术品中隐藏的信息。网上有很多例子。问题是,它们都静态地并排显示之前和之后,这削弱了魔力(见这里和这里)。整整一代人可能只见过这种格式的折叠。

当然,我必须为网络创建纸张折叠效果。有许多不同的方法可以实现这一点,但这种方法很好,因为:

  • 它只是CSS,不依赖于JavaScript。
  • 使用单个图像,而不是要求在 Photoshop 中对图像进行切片。
  • 可以通过在样式属性中设置 CSS 变量来仅使用 HTML 进行配置。

这是它的演示,使用约翰尼·桑普森(Johnny Sampson)在庆祝Jaffee98岁生日的一期中的作品。悬停或点击可折叠。

在线演示地址

点击查看

效果的 HTML 相当简单。您可能想知道独立图像元素 - 它是隐藏的,但用于设置组件的大小和纵横比。图像路径在此处指定,并再次作为CSS变量来设置其他元素的背景图像。

html 复制代码
<span class="jaffee" style="--bg: url('path/to/image.png');">
  <span class="a"></span>
  <span class="bc">
    <span class="b"></span>
    <span class="c"></span>
  </span>
  <img src="path/to/image.png">
</span>

这是用于设置定位、3D 变换和过渡的 CSS。

css 复制代码
.jaffee {
  position: relative;
  display: inline-flex;
  transform: rotateX(10deg); 
  transform-style: preserve-3d;
  cursor: grab;
}

.jaffee img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56vh;
  opacity: 0;
}

.jaffee .a,
.jaffee .b,
.jaffee .c {
  top: 0;
  display: inline-block;
  height: 100%;
  background-image: var(--bg);
  background-size: cover;
  background-repeat: no-repeat;
}

.jaffee .a {
  position: absolute;
  left: 0;
  width: 50%;
  background-position: 0 0;
}

.jaffee .bc {
  position: absolute;
  display: inline-flex;
  width: 50%;
  height: 100%;
  left: 50%;
  transform-origin: left;
  transition: transform 3s;
  transform-style: preserve-3d;
}

.jaffee .b,
.jaffee .c {
  position: relative;
  width: 50%;
  backface-visibility: hidden;
}

.jaffee .b {
  background-position: 66.666667% 0;
  transform-style: preserve-3d;
}

.jaffee .b:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transform: rotateY(180deg) translateZ(1px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.jaffee .c {
  background-position: 100% 0;
  transform-origin: left;
  transition: transform 2s;
}

.jaffee:hover .bc,
.jaffee:active .bc {
  transform: rotateY(-180deg) translateZ(-1px);
  transition: transform 2s;
}

.jaffee:hover .c,
.jaffee:active .c {
  transform: rotateY(180deg) translateZ(2px);
  transition: transform 3s;
}
相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python
袁煦丞8 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作