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

show()/hide()的实现

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

1. <div id="box">  
2.     <input type="checkbox" id="sh"/>  
3.     <label for="sh">show/hide</label>  
4.     <div id="shbox">  
5.         点击上面的show/hide实现show()/hide()   
6.     </div>  
7. </div>  

css:

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如下：

1. :checked~