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

让人生与事业结伴,让生命与使命同行。你要按你所想的去生活,否则,你迟早会按你所生活的去想。

show()/hide()的实现

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

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

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:1pxsolidgreen;
  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:1pxsolidblue;
  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:opacity2s;
  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:all2s;
  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的一些效果内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例