使用CSS3和Checkbox实现JQuery的一些效果
金饶,3u8674航班,光线飞车私服
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新增的背景属性
CSS3新增属性:background-clip ,background-origin , background-size,本文给大家分享CSS3新增的背景属性...
[阅读全文]
-
-
-
CSS3 旋转立方体问题详解
这篇文章主要介绍了CSS3 旋转立方体问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
Grid 宫格常用布局的实现
这篇文章主要介绍了Grid 宫格常用布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
-
-
CSS3实现网站商品展示效果图
这篇文章主要介绍了CSS3实现网站商品展示效果图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习...
[阅读全文]
-
网友评论