时间戳

首页 > 解决方案 > 使用 CSS 实现响应式纸张卷曲效果

css - 使用 CSS 实现响应式纸张卷曲效果

问题描述

我想创建在 w3resource 的代码框中看到的卷曲和阴影效果： https
://www.w3resource.com/jquery-exercises/part1/jquery-practical-exercise-6.php 它是响应式的。效果只是在侧面。中间部分随着窗口变窄而缩短。
周围有很多例子，但我找不到响应版本。w3resource 使用内联样式。我相信有经验的人可以很快弄清楚。

标签： css

解决方案

卷曲效果基本上是一种视错觉。没有卷曲，“纸”的底部是元素的直水平底部。由于阴影，您的眼睛认为它正在卷曲。

使用伪元素之前和之后将阴影应用于“一张纸”。您给出的示例使用 em 来调整阴影的大小和位置 - 您可能喜欢使用它们来获得您想要的效果，并使您尝试制作“卷曲”的任何尺寸的“纸张”都有意义。

这是一个简单的片段，可以帮助您入门。它的响应是纸张和阴影的大小是百分比值。您需要进行试验，看看是否对阴影使用 %s 有意义，或者您是否最好坚持使用 ems（或者实际上是 pxs）。此外，为了保持纸张纵横比，值得考虑使用 vmin 而不是 %s（例如，保持 A4 或信纸所需的比率，具体取决于您的用例）。

.curl {
  width: 60vmin;
  height: 80vmin;
  background-color: #eeeeee;
  position: relative;
  border: solid 0.5px #fefefe;
}
div.curl:after {
  right: 0.75em;
  left: auto;
  transform: rotate(2deg);
}
div.curl:before, .curl:after {
  content: '';
  z-index: -2;
  display: block;
  position: absolute;
  bottom: 0.75em;
  left: 0.18em;
  width: 40%;
  height: 20%;
  box-shadow: 0px 13px 8px #979797;
  transform: rotate(-2deg);
}
<div class="curl"></div>

推荐阅读