HTML 实现炫酷选项卡效果

在前端开辟中，创造出吸引人的交互效果可以或许极大地提升用户体验。今天，我将分享一段利用 HTML 和 CSS 实现的炫酷选项卡代码，并详细介绍其实现过程。
一、效果展示

我们的选项卡效果具有以下特点：

• 团体结构美观大方，页面居中显示。
  
• 选项卡标签颜色鲜艳，分别为紫色（#a55eea）、蓝色（#45aaf2）和绿色（#26de81），且带有圆角边框和白色文字，鼠标悬停时透明度变为 0.7，增长交互反馈。
  
• 选项卡内容区域配景与对应标签颜色一致，通过 3D 旋转效果切换不同的内容，过渡时间为 3 秒，给人一种流畅的视觉感受。
  

 HTML
这里利用了一个容器 div 来包裹选项卡的各个部分。容器内包含三个单选按钮用于切换选项卡，一个选项卡内容区域 tab_body 和一个标签区域 label。每个标签对应一个单选按钮，用于触发选项卡内容的切换。

1. <div class="container">
2.     <input type="radio" name="aa" id="item1">
3.     <input type="radio" name="aa" id="item2">
4.     <input type="radio" name="aa" id="item3">
6.     <div class="tab_body">
7.         <div class="tab_content">
8.             <h3>top content</h3>
9.             <p>this is top content</p>
10.         </div>
11.         <div class="tab_content">
12.             <h3>top content</h3>
13.             <p>this is middle content</p>
14.         </div>
15.         <div class="tab_content">
16.             <h3>top content</h3>
17.             <p>this is bottom content</p>
18.         </div>
19.     </div>
20.     <div class="label">
21.         <label for="item1">top</label>
22.         <label for="item2">middle</label>
23.         <label for="item3">bottom</label>
24.     </div>
25. </div>

复制代码

CSS

1. * {
2.     padding: 0;
3.     margin: 0;
4. }
5. body {
6.     height: 100vh;
7.     display: flex;
8.     justify-content: center;
9.     align-items: center;
10. }
11. .container {
12.     width: 700px;
13.     height: 350px;
14.     display: flex;
15.     justify-content: space-between;
16.     align-items: center;
17.     perspective: 1300px;
18. }
19. input {
20.     display: none;
21. }
22. .container.tab_body {
23.     width: 500px;
24.     height: 300px;
25.     background: pink;
26.     position: relative;
27.     transform-style: preserve-3d;
28.     transition-duration: 3s;
29. }
30. .container.label {
31.     width: 150px;
32.     height: 350px;
33. }
34. .container.label label {
35.     display: block;
36.     width: 150px;
37.     height: 100px;
38.     margin: 5px 0px 20px;
39.     background: #a55eea;
40.     text-align: center;
41.     line-height: 100px;
42.     color: #ffffff;
43.     border-radius: 70px;
44. }
45. .container.label label:hover {
46.     opacity: 0.7;
47.     cursor: pointer;
48. }
49. .container.label label:nth-child(2) {
50.     background: #45aaf2;
51. }
52. .container.label label:nth-child(3) {
53.     background: #26de81;
54. }
55. .container.tab_body.tab_content {
56.     width: 100%;
57.     height: 100%;
58.     background: #a55eea;
59.     display: flex;
60.     flex-direction: column;
61.     justify-content: center;
62.     align-items: center;
63.     color: #ffffff;
64.     position: absolute;
65. }
66. .container.tab_body.tab_content:nth-child(1) {
67.     background: #a55eea;
68.     transform: translateY(-150px) rotateX(90deg);
69. }
70. .container.tab_body.tab_content:nth-child(2) {
71.     background: #45aaf2;
72.     transform: translateZ(150px);
73. }
74. .container.tab_body.tab_content:nth-child(3) {
75.     background: #26de81;
76.     transform: translateY(150px) rotateX(-90deg);
77. }
78. #item1:checked ~.tab_body {
79.     transform: rotateX(-90deg);
80. }
81. #item2:checked ~.tab_body {
82.     transform: rotateX(0deg);
83. }
84. #item3:checked ~.tab_body {
85.     transform: rotateX(90deg);
86. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。