使用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 3D位移translate效果实例介绍
May 03 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
python编程的核心知识点总结
2021/02/08 Python
Python绘制数码晶体管日期
2021/02/19 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
关键字throw与throws的用法差异
2016/11/22 面试题
车间主任岗位职责
2014/03/16 职场文书
师德建设实施方案
2014/03/21 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书