&CSS3 实现复选框的动画特效
CSS3 实现复选框的动画特效
本课程为极客学院认证学员专享课程，完成认证即可观看
免费认证 &
认证学员特权
观看80%会员课程
点亮专属认证标识
获得个性化课程推荐
资源下载、专属优惠等
已有会员账号，请
视频太卡？试试切换线路
本课时讲解，CSS3 动画属性和 jQuery 结合使用的方法，模拟炫酷的下拉选择框动画特效
本课时讲解，使用 transform、transition 属性，和 CSS3 强大的选择器功能，实现炫酷的单选框动画特效。
本课时讲解，使用 transform、transition 属性，和 CSS3 强大的选择器功能，实现炫酷的复选框动画特效。
只有成为VIP会员才能提问&回复，快吧！如果你还没有账号你可以一个账号。
添加新技术问题
课程 [CSS3 实现复选框的动画特效]
中已存在问题
添加新技术问题
服务热线:400-678-8266设计作品交易平台
设计总数：3,020,248 个，总下载 : 1,985,754 次
让您更轻松更多的赚钱
我图网为696,387家设计公司，广告公司，印刷厂，文印店，威客提供下载服务，让他们更轻松更多的赚钱
Copyright &
我图网 沪ICP备号 用时：0.0113&&
秒 V1.3.3若您发现您的权利被侵害，请发起知识产权投诉，CSS3单选框美化点击单选框Checkbox动画效果
下载资源：285次
下载积分：20分
本站评论功能暂时取消，后续此功能例行通知。
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口非常个性化的CSS3自定义checkbox和radiobox | HTML5资源教程trick:CSS 3+checkbox实现JQuery的6个基本动画效果
在JQuery中，有六个基本动画函数：show()/hide()、fadeIn()/fadeOut()、slideUp()/slideDown()。这篇文章，就利用CSS3+checkbox实现这六个基本动画。
show()/hide()的实现
show()/hide()的实现主要控制元素的display属性。
点击上面的show/hide实现show()/hide()
#box *:not(#shbox){
display:inline-
:checked~#shbox{
line-height:30
text-align:
border-radius:5
background:#
height:200
box-sizing:border-
padding:50
运行结果：https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/
fadeIn()/fadeOut()的实现
fadeIn()/fadeOut()的实现主要是控制元素的opcity属性。html依旧采用上面的，修改css如下：
:checked~#shbox{
opacity:0;
fadeIn()/fadeOut()可以控制渐显/渐退的速度，同样给#shbox添加transition属性可以模拟这个效果：
transition:opacity 2s;
运行效果：https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
slideUp()/slideDown()的实现
slideUp()/slideDown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的，css修改如下：
:checked~#shbox{
background:#
overflow-y:
height:200
box-sizing:border-
transition:all 2s;
#shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏，不然，#shbox里面的文本仍然会显示； transition实现一个过渡;同时去掉了border属性。
运行结果：https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/
主要技巧是利用checkbox（或radio）的checked的属性 对于常见隐藏元素的方法有如下五种：
display: //不占空间 height:0 opacity:0; position:left:- visibility: //占据空间
张大大对这方面有更详细的解释：关于隐藏元素的一些方法
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'}