CSS切页可以让一个网站或者应用程序变得更加美观和易用。下面我们来看一些优美的CSS切页的例子。

.tab {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
background-color: #F6F6F6;
border-radius: 20px;
overflow: hidden;
}
.tab button {
border: 0;
outline: 0;
background-color: transparent;
cursor: pointer;
font-size: 16px;
color: #676767;
padding: 10px 20px;
transition: color 0.2s ease-out;
}
.tab button.active {
color: #007AFF;
}
.tab-content {
position: relative;
height: 200px;
width: 100%;
}
.tab-content >div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.tab-content >div.active {
opacity: 1;
}

上述代码实现了一个简单的标签页效果。外包含一个.tab元素，它里面有若干个button元素，每个button代表一个标签页。然后，使用CSS所提供的flex布局技巧将button规整排列，并套用简单的渐变背景色及文字变换效果实现页面视觉上的变化。最后，通过tab-content元素及其下面的子元素来显示或者隐藏标签页对应的内容。当点击相应标签页按钮时，使用JS动态修改CSS的.class名称实现标签页的切换，同时改变tab-conent下的标签内容DIV的状态以实现对应显示状态切换。

优美的CSS切页不仅可以美化我们的网站或者应用程序，还可以增加用户体验和交互性。我们可以参考其他网站的设计样式，学习各种CSS技巧，创造出自己的独特风格的切页效果。