伪元素实现纸张卷角效果

最新推荐文章于 2022-11-22 16:06:52 发布

原创最新推荐文章于 2022-11-22 16:06:52 发布 · 877 阅读

CC 4.0 BY-SA版权

本文介绍如何利用CSS伪元素before和after实现立体视觉效果，通过调整大小、背景等属性，创造出独特的视觉冲击力。具体步骤包括新建div元素、创建倾斜的灰色方块并设置阴影、将两个方块的z-index设置为-1以让白色“纸”挡住它们，从而展示效果。

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

先上效果图:

主要是使用了伪元素：before和：after，伪元素虽然是不存在的，但是它表现的就跟普通元素是一样的，可以调整大小、背景等。

实现步骤:
1.新建一个div，即图中的白色“纸张”

<div class="box effect">
</div>

2.利用伪类创建两个灰色的方块，并倾斜，且为它设置阴影：

.effect:before, .effect:after
{
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}