CSS3交替切片特效

zichenblog

于 2025-04-23 13:52:07 发布

阅读量519

点赞数 15

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/zichenblog/article/details/147448434

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3交替切片特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
overflow-x: hidden;
background: #f0f0f0;
color: #333;
}

.sliced-container {
width: 100%;
position: relative;
}

.slice {
width: 100%;
padding: 80px 20px;
position: relative;
overflow: hidden;
}

.slice-content {
max-width: 1200px;
margin: 0 auto;
padding: 40px;
position: relative;
z-index: 2;
}

h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}

p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 20px;
}

/* 奇数切片样式 */
.slice:nth-child(odd) {
background: #fff;
transform: skewY(-3deg);
}

.slice:nth-child(odd) .slice-content {
transform: skewY(3deg);
}

/* 偶数切片样式 */
.slice:nth-child(even) {
background: #4a6fa5;
color: white;
transform: skewY(3deg);
}

.slice:nth-child(even) .slice-content {
transform: skewY(-3deg);
}

/* 切片之间的间距调整 */
.slice:nth-child(odd) {
margin-top: -60px;
margin-bottom: -60px;
}

/* 第一个切片不需要上边距 */
.slice:first-child {
margin-top: 0;
}

/* 最后一个切片不需要下边距 */
.slice:last-child {
margin-bottom: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
.slice {
padding: 60px 15px;
}

.slice-content {
padding: 30px;
}

h2 {
font-size: 2rem;
}
}

.footer {
text-align: center;
padding: 30px;
background: #333;
color: white;
}

.footer a {
color: #4a6fa5;
text-decoration: none;
font-weight: bold;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="sliced-container">
<section class="slice">
<div class="slice-content">
<h2>切片特效展示</h2>
<p>这是一个使用CSS3 transform属性创建的交替切片布局效果。每个切片都有不同的倾斜角度，创造出独特的视觉体验。</p>
<p>通过nth-child选择器，我们为奇数和偶数切片应用不同的样式和倾斜方向。</p>
</div>
</section>

<section class="slice">
<div class="slice-content">
<h2>响应式设计</h2>
<p>这个特效完全响应式，在不同屏幕尺寸上都能良好显示。在移动设备上，倾斜角度和间距会自动调整以确保最佳视觉效果。</p>
<p>使用媒体查询，我们针对小屏幕设备优化了布局和字体大小。</p>
</div>
</section>

<section class="slice">
<div class="slice-content">
<h2>现代CSS技术</h2>
<p>这个效果仅使用纯CSS实现，不需要任何JavaScript。展示了CSS3 transform属性的强大功能。</p>
<p>通过简单的skewY变换和巧妙的边距调整，我们创造出了这种动态的切片布局。</p>
</div>
</section>

<section class="slice">
<div class="slice-content">
<h2>创意网页设计</h2>
<p>这种交替切片效果非常适合现代创意网站的设计。它可以用于展示产品特点、服务项目或团队介绍等内容。</p>
<p>通过改变颜色和内容，您可以轻松定制这种布局以适应您的品牌风格。</p>
</div>
</section>
</div>

<div class="footer">
<p>更多网页特效请访问: <a href="http://www.zsf.beauty" target="_blank">www.zsf.beauty</a></p>
</div>
</body>
</html>