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


Posted in HTML / CSS onAugust 03, 2015

show()/hide()的实现

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

XML/HTML Code复制内容到剪贴板
  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:

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/

HTML / CSS 相关文章推荐
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 #HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 #HTML / CSS
CSS3中的content属性使用示例
Jul 20 #HTML / CSS
详解CSS3中border-image的使用
Jul 18 #HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 #HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 #HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 #HTML / CSS
You might like
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
python发送邮件实例分享
2017/07/28 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
通过shell+python实现企业微信预警
2019/03/07 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python实现简易学生信息管理系统
2020/04/05 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
销售文员岗位职责
2013/11/29 职场文书
yy婚礼主持词
2014/03/14 职场文书
2014司机年终工作总结
2014/12/05 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python