[分享]css3实现波浪线纸张效果

CSS3 可以实现丰富的特效，如今我们就来学习一下如何使用 CSS3 实现波浪线纸张效果。首先，我们需要在 HTML 页面中创建一个div元素：接下来，为 div 添加样式。首先，设置背景颜色：.pa...

CSS3 可以实现丰富的特效，如今我们就来学习一下如何使用 CSS3 实现波浪线纸张效果。

首先，我们需要在 HTML 页面中创建一个div元素：

<div class="paper"></div>

接下来，为 div 添加样式。首先，设置背景颜色：

.paper {
　　background-color:#fff2e6;
}

然后，我们需要使用 CSS3 的伪元素 ::before 和 ::after 来添加两条波浪线：

.paper::before, .paper::after {
　　content: "";
　　position: absolute;
　　z-index: -1;
　　left: 0;
　　right: 0;
　　height: 10px;
　　background: #fff2e6;
　　transform-origin: center bottom;
}

.paper::before {
　　top: 12px;
　　transform: skewY(8deg);
}

.paper::after {
　　top: 22px;
　　transform: skewY(-8deg);
}

最后，让波浪线的重叠部分变成淡粉色来实现纸张的效果：

.paper::before {
　　background-image: linear-gradient(
　　　　to bottom,
　　　　transparent,
　　　　rgba(255, 255, 255, 0.8) 50%,
　　　　transparent
　　);
}

.paper::after {
　　background-image: linear-gradient(
　　　　to bottom,
　　　　transparent,
　　　　rgba(255, 255, 255, 0.6) 50%,
　　　　transparent
　　);
}

现在，我们就成功地实现了波浪线纸张效果。你可以根据需要更改颜色、高度等样式来适配不同的需求。