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

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的一些效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！