3种炫酷CSS3复选框checkbox动画特效_html/css_WEB-ITnose
程序员文章站
2022-05-14 17:15:08
...
这是一款效果非常炫酷的CSS3复选框checkbox动画特效。这组复选框动画特效共3种效果,它们都是在原生checkbox元素的基础上进行了美化,在用户点击复选框的时候制作出非常酷的动画效果。
在线预览 源码下载
使用方法
HTML结构普通的HTML checkbox复选框控件的样式非常的平淡。在现代网页设计中,我们可以通过CSS3来为它设置更加漂亮的外观和动画特效。通过CSS的@keyframe属性,我们就可以制作出各种神奇的复选框动画特效。
在这些复选框动画的DEMO中,使用的都是无序列表结构。每一个列表项中都带有一个
在CSS样式中,首先将原生checkbox隐藏起来。
input[type="checkbox"] { display: none;}
然后在label元素上设置相对定位和一些padding值。接着需要使用到label元素的:before和:after伪元素,由于这里要使用到Font Awesome字体图标,所以将它的字体设置为FontAwesome。
/* 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;}
推荐阅读
-
纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效_html/css_WEB-ITnose
-
8组超炫酷纯CSS3鼠标滑过图片动画效果_html/css_WEB-ITnose
-
7款纯CSS3实现的炫酷动画应用_html/css_WEB-ITnose
-
3种炫酷CSS3复选框checkbox动画特效_html/css_WEB-ITnose
-
8组超炫酷纯CSS3鼠标滑过图片动画效果_html/css_WEB-ITnose
-
一款纯css3实现的超炫动画背画特效_html/css_WEB-ITnose
-
9种CSS3炫酷图片展开预览展示动画特效_html/css_WEB-ITnose
-
纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效_html/css_WEB-ITnose
-
12种炫酷的CSS3鼠标滑过图片遮罩层动画特效_html/css_WEB-ITnose
-
28种CSS3炫酷加载动画特效_html/css_WEB-ITnose