HTML 实现炫酷选项卡效果
在前端开辟中，创造出吸引人的交互效果可以或许极大地提升用户体验。今天，我将分享一段利用 HTML 和 CSS 实现的炫酷选项卡代码，并详细介绍其实现过程。一、效果展示
我们的选项卡效果具有以下特点：
[*]团体结构美观大方，页面居中显示。
[*]选项卡标签颜色鲜艳，分别为紫色（#a55eea）、蓝色（#45aaf2）和绿色（#26de81），且带有圆角边框和白色文字，鼠标悬停时透明度变为 0.7，增长交互反馈。
[*]选项卡内容区域配景与对应标签颜色一致，通过 3D 旋转效果切换不同的内容，过渡时间为 3 秒，给人一种流畅的视觉感受。
HTML
这里利用了一个容器 div 来包裹选项卡的各个部分。容器内包含三个单选按钮用于切换选项卡，一个选项卡内容区域 tab_body 和一个标签区域 label。每个标签对应一个单选按钮，用于触发选项卡内容的切换。
<div class="container">
<input type="radio" name="aa" id="item1">
<input type="radio" name="aa" id="item2">
<input type="radio" name="aa" id="item3">
<div class="tab_body">
<div class="tab_content">
<h3>top content</h3>
<p>this is top content</p>
</div>
<div class="tab_content">
<h3>top content</h3>
<p>this is middle content</p>
</div>
<div class="tab_content">
<h3>top content</h3>
<p>this is bottom content</p>
</div>
</div>
<div class="label">
<label for="item1">top</label>
<label for="item2">middle</label>
<label for="item3">bottom</label>
</div>
</div> CSS
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 700px;
height: 350px;
display: flex;
justify-content: space-between;
align-items: center;
perspective: 1300px;
}
input {
display: none;
}
.container.tab_body {
width: 500px;
height: 300px;
background: pink;
position: relative;
transform-style: preserve-3d;
transition-duration: 3s;
}
.container.label {
width: 150px;
height: 350px;
}
.container.label label {
display: block;
width: 150px;
height: 100px;
margin: 5px 0px 20px;
background: #a55eea;
text-align: center;
line-height: 100px;
color: #ffffff;
border-radius: 70px;
}
.container.label label:hover {
opacity: 0.7;
cursor: pointer;
}
.container.label label:nth-child(2) {
background: #45aaf2;
}
.container.label label:nth-child(3) {
background: #26de81;
}
.container.tab_body.tab_content {
width: 100%;
height: 100%;
background: #a55eea;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
position: absolute;
}
.container.tab_body.tab_content:nth-child(1) {
background: #a55eea;
transform: translateY(-150px) rotateX(90deg);
}
.container.tab_body.tab_content:nth-child(2) {
background: #45aaf2;
transform: translateZ(150px);
}
.container.tab_body.tab_content:nth-child(3) {
background: #26de81;
transform: translateY(150px) rotateX(-90deg);
}
#item1:checked ~.tab_body {
transform: rotateX(-90deg);
}
#item2:checked ~.tab_body {
transform: rotateX(0deg);
}
#item3:checked ~.tab_body {
transform: rotateX(90deg);
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]