您好,登录后才能下订单哦!
本篇内容主要讲解“如何使用CSS3和Checkbox实现JQuery的一些效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用CSS3和Checkbox实现JQuery的一些效果”吧!
show()/hide()的实现
show()/hide()的实现主要控制元素的display属性。
html:
XML/HTML Code复制内容到剪贴板
<div id="box">
<input type="checkbox" id="sh"/>
<label for="sh">show/hide</label>
<div id="shbox">
点击上面的show/hide实现show()/hide()
</div>
</div>
css:
CSS Code复制内容到剪贴板
#box{
position:relative;
}
#box *:not(#shbox){
display:inline-block;
}
input{
position:absolute;
left:-10000000px;
}
:checked~#shbox{
display:none;
}
label{
width:100px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid green;
position:absolute;
left:0px;
cursor:pointer;
border-radius:5px;
}
#shbox{
background:#ccc;
color:red;
width:200px;
height:200px;
border:1px solid blue;
box-sizing:border-box;
padding:50px;
position:absolute;
top:50px;
}
运行结果:https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/
fadeIn()/fadeOut()的实现
fadeIn()/fadeOut()的实现主要是控制元素的opcity属性。html依旧采用上面的,修改css如下:
CSS Code复制内容到剪贴板
:checked~#shbox{
opacity:0;
}
fadeIn()/fadeOut()可以控制渐显/渐退的速度,同样给#shbox添加transition属性可以模拟这个效果:
CSS Code复制内容到剪贴板
#shbox{
transition:opacity 2s;
}
运行效果:https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的实现
slideUp()/slideDown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的,css修改如下:
CSS Code复制内容到剪贴板
:checked~#shbox{
height:0px;
}
#shbox{
background:#ccc;
overflow-y:hidden;
color:red;
width:200px;
height:200px;
box-sizing:border-box;
transition:all 2s;
position:absolute;
top:50px;
}
#shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏,不然,#shbox里面的文本仍然会显示; transition实现一个过渡;同时去掉了border属性。
运行结果:https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/
到此,相信大家对“如何使用CSS3和Checkbox实现JQuery的一些效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。