使用CSS3和Checkbox实现JQuery的一些效果

时间：2021-05-08

show()/hide()的实现

show()/hide()的实现主要控制元素的display属性。
html:

XML/HTML Code复制内容到剪贴板
  • <divid="box">
  • <inputtype="checkbox"id="sh"/>
  • <labelfor="sh">show/hide</label>
  • <divid="shbox">
  • 点击上面的show/hide实现show()/hide()
  • </div>
  • </div>

    • css:

    CSS Code复制内容到剪贴板
  • #box{
  • position:relative;
  • }
  • #box*:not(#shbox){
  • display:inline-block;
  • }
  • input{
  • position:absolute;
  • left:-10000000px;
  • }
  • :checked~#shbox{
  • display:none;
  • }
  • label{
  • width:100px;
  • height:30px;
  • line-height:30px;
  • text-align:center;
  • border:1pxsolidgreen;
  • position:absolute;
  • left:0px;
  • cursor:pointer;
  • border-radius:5px;
  • }
  • #shbox{
  • background:#ccc;
  • color:red;
  • width:200px;
  • height:200px;
  • border:1pxsolidblue;
  • box-sizing:border-box;
  • padding:50px;
  • position:absolute;
  • top:50px;
  • }

    • 运行结果：https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/
    fadeIn()/fadeOut()的实现

    fadeIn()/fadeOut()的实现主要是控制元素的opcity属性。html依旧采用上面的，修改css如下：

    CSS Code复制内容到剪贴板
  • :checked~#shbox{
  • opacity:0;
  • }

    • fadeIn()/fadeOut()可以控制渐显/渐退的速度，同样给#shbox添加transition属性可以模拟这个效果：

    CSS Code复制内容到剪贴板
  • #shbox{
  • transition:opacity2s;
  • }

    • 运行效果：https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
    slideUp()/slideDown()的实现

    slideUp()/slideDown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的，css修改如下：

    CSS Code复制内容到剪贴板
  • :checked~#shbox{
  • height:0px;
  • }
  • #shbox{
  • background:#ccc;
  • overflow-y:hidden;
  • color:red;
  • width:200px;
  • height:200px;
  • box-sizing:border-box;
  • transition:all2s;
  • position:absolute;
  • top:50px;
  • }

    • #shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏，不然，#shbox里面的文本仍然会显示； transition实现一个过渡;同时去掉了border属性。
    运行结果：https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章