新增第212个小实例：纯CSS实现弧边选项卡
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
0a295c11bf
commit
2e95071f41
|
|
@ -219,6 +219,7 @@
|
|||
209. HTML5+CSS3+JS小实例：音频可视化
|
||||
210. HTML5+CSS3小实例：文字溶合切换效果
|
||||
211. HTML5+CSS3+JS小实例：实时给中文添加拼音
|
||||
212. HTML5+CSS3小实例：纯CSS实现弧边选项卡
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口宽高 */
|
||||
min-height: 100vh;
|
||||
/* 弹性布局 居中演示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 选项卡 */
|
||||
.tabs .label{
|
||||
/* 行内块元素 */
|
||||
display: inline-block;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
}
|
||||
.tabs .label label{
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
/* 块元素 */
|
||||
display: block;
|
||||
/* 定义自定义属性 通过var进行调用 */
|
||||
--color:#1fab8930;
|
||||
background-color: var(--color);
|
||||
border-radius: 10px 10px 0 0;
|
||||
/* 设置旋转基点 */
|
||||
transform-origin: center bottom;
|
||||
/* 转换元素：视距100px 沿x轴旋转30度 */
|
||||
transform: perspective(100px) rotateX(30deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 左右两侧弧边的统一样式 */
|
||||
.tabs .label label::before,
|
||||
.tabs .label label::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: var(--color);
|
||||
bottom: 0;
|
||||
}
|
||||
/* 左侧弧边 */
|
||||
.tabs .label label::before{
|
||||
left: -10px;
|
||||
/* 通过径向渐变实现弧边 */
|
||||
background: radial-gradient(circle at 0 0,transparent 10px,var(--color) 10px);
|
||||
}
|
||||
/* 右侧弧边 */
|
||||
.tabs .label label::after{
|
||||
right: -10px;
|
||||
background: radial-gradient(circle at 10px 0,transparent 10px,var(--color) 10px);
|
||||
}
|
||||
/* 选项卡文本 */
|
||||
.tabs .label span{
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
/* 元素不对鼠标事件做出反应（穿透元素） */
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 选项卡面板 */
|
||||
.tabs .panels{
|
||||
margin-top: -4px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.tabs .panel{
|
||||
width: 475px;
|
||||
height: 300px;
|
||||
border: 2px solid #1fab89;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
/* 通过隐藏的单选按钮控制选项卡、面板的切换 */
|
||||
#label1:checked ~ .label:nth-of-type(1) label,
|
||||
#label2:checked ~ .label:nth-of-type(2) label,
|
||||
#label3:checked ~ .label:nth-of-type(3) label{
|
||||
--color:#1fab89;
|
||||
z-index: 1;
|
||||
}
|
||||
#label1:checked ~ .label:nth-of-type(1) span,
|
||||
#label2:checked ~ .label:nth-of-type(2) span,
|
||||
#label3:checked ~ .label:nth-of-type(3) span{
|
||||
color:#fff;
|
||||
z-index: 2;
|
||||
}
|
||||
#label1:checked ~ .panels .panel:nth-of-type(1),
|
||||
#label2:checked ~ .panels .panel:nth-of-type(2),
|
||||
#label3:checked ~ .panels .panel:nth-of-type(3){
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>纯CSS实现弧边选项卡</title>
|
||||
<link rel="stylesheet" href="212.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="tabs">
|
||||
<input type="radio" name="tabs" id="label1" hidden checked>
|
||||
<input type="radio" name="tabs" id="label2" hidden>
|
||||
<input type="radio" name="tabs" id="label3" hidden>
|
||||
<div class="label">
|
||||
<label for="label1"></label>
|
||||
<span>选项卡1</span>
|
||||
</div>
|
||||
<div class="label">
|
||||
<label for="label2"></label>
|
||||
<span>选项卡2</span>
|
||||
</div>
|
||||
<div class="label">
|
||||
<label for="label3"></label>
|
||||
<span>选项卡3</span>
|
||||
</div>
|
||||
<div class="panels">
|
||||
<div class="panel">面板1</div>
|
||||
<div class="panel">面板2</div>
|
||||
<div class="panel">面板3</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue