Introduction （前言）
现如今，各种前端框架盛行的时代，单纯的完成一些界面上的功能已经越来越方便了。然而，过多的使用了这些框架而不去多研究想想这类框架的具体实现，只是会用是不能迅速提高自己个人能力的，相反，用多了有时候会遮蔽自己的视野，无法完成自己的知识体系升级。今天，我就准备讲讲CSS能够做的一些功能交互，这些功能或许你之前第一时间想到的可能是用js，殊不知强大的CSS也能完成，希望通过我的分享能够增加你的知识视野。
1 tabs（标签页）
1.1 敲重点
- 相同
name属性的radio组一次性只能选择一个，模拟面板切换 - 利用
radio具有可聚焦属性，模拟点击事件 - 通过
CSS派生选择器，结合z-index层级来完成内容显隐切换
1.2 关键代码
<div class="tab">
<input type="radio" id="radio1" name="radiogroup"/>
<label for="radio1">标签1</label>
<section>内容1</section>
</div>
<div class="tab">
<input type="radio" id="radio2" name="radiogroup"/>
<label for="radio2">标签2</label>
<section>内容2</section>
</div>
复制代码#radio1:checked ~ label,#radio2:checked ~ label,#radio3:checked ~ label{
background:#e67e22;
}
#radio1:checked ~ section,#radio2:checked ~ section,#radio3:checked ~ section{
z-index:1
}
复制代码2 collapse（折叠面板）
1.1 敲重点
- 利用
checkbox多选特性，模拟同时事件聚焦 - 利用
checkbox具有可聚焦属性，模拟点击事件 - 通过
CSS派生选择器来变换内容高度完成面版折叠效果
1.2 关键代码
<input type="checkbox" id="checkbox1" class="checkbox-common"/>
<label for="checkbox1" class="panel-title">面板1</label>
<section class="panel-content" id="content1">内容1</section>
复制代码#checkbox1:checked ~ #content1,#checkbox2:checked ~ #content2,#checkbox3:checked ~ #content3{
height:100px;
}
复制代码3 dialog（模态框）
3.1 敲重点
- 通过a标签瞄点定位元素，
href和id一致，模拟点击 - 通过
:target选择器定位模态元素，切换显隐
3.2 关键代码
<a href="#dialog" class="dialog-btn">click me</a>
<div class="dialog-box" id="dialog">
<div class="dialog-con">
<a href="#" class="dialog-close">X</a>
content
</div>
</div>
复制代码.dialog-box:target{
visibility:visible
}
复制代码4 lightBox（图片预览）
4.1 敲重点
- 通过a标签瞄点定位元素，
href和id一致，模拟点击 - 通过
:target选择器定位大图显示
4.2 关键代码
<div class="light-box">
<a href="#img1"><img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png?w=100&h=100" alt=""></a>
<a href="#" id="img1" class="lightbox">
<img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png" alt="">
</a>
</div>
复制代码.lightbox{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,1);
right:0;
bottom:0;
text-align:center;
display:none;
z-index:999;
}
.lightbox:target{
display:block;
}
复制代码5 tooltip（文字提示）
5.1 敲重点
- 利用
html自定义属性data-attr来存储提示内容 - 通过
attr(data-attr)来获得提示内容并通过hover来显示文字提示
5.2 关键代码
<p class="poem">昼短<span data-tip="痛苦难熬的夜晚" class="tooltip" href="" tabindex="0">苦夜</span>长，何不<span href=""class="tooltip" data-tip="一起夜晚游玩" tabindex="0">秉夜</span>游</p>
复制代码.tooltip:before{
content:attr(data-tip);
position:absolute;
left:50%;
bottom:120%;
display:block;
padding:.5em;
width:150px;
transform:translateX(-50%);
background:#7d5fff;
color:#fff;
opacity:0;
text-align:center;
outline:none;
}
复制代码6 indicator （阅读进度）
6.1 敲重点
- body设置一个对角线的渐变背景
- 在body上覆盖一个背景为白色的遮盖层，露出顶部一点点用来显示进度
6.2 关键代码
body{
background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
background-size: 100% calc(100% - 100vh + 129px);
background-repeat: no-repeat;
}
复制代码7 总结（Summary）
看完上述例子，是不是对CSS的强大有了一层更深的认识？希望在留言分享你的CSS一些特殊有用技巧，大家一起学习。
参考链接：
转载于:https://juejin.im/post/5d0b76d8f265da1b602909c5