当前位置：首页 > 网页特效 > 选择框

3种炫酷CSS3复选框checkbox动画特效

分类：选择框日期：2024-05-14 点击(1) 评论(0)

简介

#####  HTML结构
普通的HTML checkbox复选框控件的样式非常的平淡。在现代网页设计中，我们可以通过CSS3来为它设置更加漂亮的外观和动画特效。通过CSS的@keyframe属性，我们就可以制作出各种神奇的复选框动画特效。

在这些复选框动画的DEMO中，使用的都是无序列表结构。每一个列表项中都带有一个checkbox元素和一个label元素。

```html
<ul>
  <li>
      <input type="checkbox" name="manager" id="manager" />
      <label for="manager">项目经理</label>
  </li>
  <li>
      <input type="checkbox" name="webdesigner" id="webdesigner" />
      <label for="webdesigner">网页设计师</label>
  </li>
  <li>
      <input type="checkbox" name="webdev" id="webdev" />
      <label for="webdev">网站技术员</label>
  </li>
  <li>
      <input type="checkbox" name="seo" id="seo" />
      <label for="seo">SEO</label>
  </li>
  <li>
      <input type="checkbox" name="itstaff" id="itstaff" />
      <label for="itstaff">IT技术员</label>
  </li>
  <li>
      <input type="checkbox" name="csr" id="csr" />
      <label for="csr">客户服务代表</label>
  </li>
</ul>   
```          
#####  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;
}   
```

web299.com

3种炫酷CSS3复选框checkbox动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果