web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
选择框
3种炫酷CSS3复选框checkbox动画特效
分类:
选择框
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### HTML结构 普通的HTML checkbox复选框控件的样式非常的平淡。在现代网页设计中,我们可以通过CSS3来为它设置更加漂亮的外观和动画特效。通过CSS的@keyframe属性,我们就可以制作出各种神奇的复选框动画特效。 在这些复选框动画的DEMO中,使用的都是无序列表结构。每一个列表项中都带有一个checkbox元素和一个label元素。 ```html
项目经理
网页设计师
网站技术员
SEO
IT技术员
客户服务代表
``` ##### CSS样式 在CSS样式中,首先将原生checkbox隐藏起来。 ```html input[type="checkbox"] { display: none; } ``` 然后在label元素上设置相对定位和一些padding值。接着需要使用到label元素的:before和:after伪元素,由于这里要使用到Font Awesome字体图标,所以将它的字体设置为FontAwesome。 ```html /* Checkbox Icons */ label { position: relative; padding-left: 30px; font-size: 30px; cursor: pointer; color: #fff; padding: 16px 28px 0 0; } label:before, label:after { font-family: FontAwesome; font-size: 50px; /*absolutely positioned*/ position: absolute; top: 0; left: -49px; right: 10px; } ``` 接下来要做的事情是分别设置:before和:after伪元素为复选框选中和未选中状态时使用的图标。为了在CSS中使用 Font Awesome图标,这里使用的是unicode版本的图标(所有Font Awesome字体图标和它的unicode值可以参考这里)。 ```html label:before { content: '\f096'; /*未选中状态的复选框 */ } label:after { content: '\f00c'; /*选中状态的复选框*/ max-width: 0; overflow: hidden; opacity: 0.5; font-size: 27px; top: 16px; left: -42px; color: #f2ca27; -webkit-transition: all 0.50s; -moz-transition: all 0.50s; -o-transition: all 0.50s; transition: all 0.50s; } ``` 最后,通过checkbox hack技术,使复选框被选择的时候,label:after伪元素产生动画效果。 ```html input[type="checkbox"]:checked + label:after { max-width: 25px; opacity: 1; margin-right: 90px; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告