平武建站

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

本篇内容主要讲解“如何使用CSS3和Checkbox实现JQuery的一些效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用CSS3和Checkbox实现JQuery的一些效果”吧!

成都创新互联是专业的长岛网站建设公司，长岛接单;提供网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行长岛网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

show()/hide()的实现

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

XML/HTML Code复制内容到剪贴板

  1.   

  2.       

  3.     show/hide  

  4.       

  5.         点击上面的show/hide实现show()/hide()   

  6.     

  

    •   

    css:

    CSS Code复制内容到剪贴板

    1. #box{   

    2.     position:relative;   

    3. }   

    4. #box *:not(#shbox){   

    5.     display:inline-block;   

    6. }   

    7. input{   

    8.     position:absolute;   

    9.     left:-10000000px;   

    10. }   

    11. :checked~#shbox{   

    12.     display:none;   

    13. }   

    14. label{   

    15.     width:100px;   

    16.     height:30px;   

    17.     line-height:30px;   

    18.     text-align:center;   

    19.     border:1px solid green;   

    20.     position:absolute;   

    21.     left:0px;   

    22.     cursor:pointer;   

    23.     border-radius:5px;   

    24. }   

    25. #shbox{   

    26.     background:#ccc;   

    27.     color:red;   

    28.     width:200px;   

    29.     height:200px;   

    30.     border:1px solid blue;   

    31.     box-sizing:border-box;   

    32.     padding:50px;   

    33.     position:absolute;   

    34.     top:50px;   

    35. }  

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

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

    CSS Code复制内容到剪贴板

    1. :checked~#shbox{   

    2.     opacity:0;   

    3. }  

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

    CSS Code复制内容到剪贴板

    1. #shbox{   

    2.     transition:opacity 2s;   

    3. }  

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

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

    CSS Code复制内容到剪贴板

    1. :checked~#shbox{   

    2.     height:0px;   

    3. }   

    4. #shbox{   

    5.     background:#ccc;   

    6.     overflow-y:hidden;   

    7.     color:red;   

    8.     width:200px;   

    9.     height:200px;   

    10.     box-sizing:border-box;   

    11.     transition:all 2s;   

    12.     position:absolute;   

    13.     top:50px;   

    14. }  

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

    到此，相信大家对“如何使用CSS3和Checkbox实现JQuery的一些效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


    当前文章：如何使用CSS3和Checkbox实现JQuery的一些效果
    文章位置：http://pwwzsj.com/article/pshjoo.html

    其他资讯