内容简介:现如今,各种前端框架盛行的时代,单纯的完成一些界面上的功能已经越来越方便了。然而,过多的使用了这些框架而不去多研究想想这类框架的具体实现,只是会用是不能迅速提高自己个人能力的,相反,用多了有时候会遮蔽自己的视野,无法完成自己的知识体系升级。今天,我就准备讲讲
现如今,各种前端框架盛行的时代,单纯的完成一些界面上的功能已经越来越方便了。然而,过多的使用了这些框架而不去多研究想想这类框架的具体实现,只是会用是不能迅速提高自己个人能力的,相反,用多了有时候会遮蔽自己的视野,无法完成自己的知识体系升级。今天,我就准备讲讲 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
一些特殊有用技巧,大家一起学习。
参考链接:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 你很可能需要知道这个调试小技巧
- [译] 你可能不知道的 Python 技巧
- 你可能不知道的 npm 实用技巧
- 你可能不知道的 IDEA 高级调试技巧
- 10个你可能不知道的前端PS技巧
- 你可能不知道的7个HTML小技巧
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。