如何创建CSS3动画复选框

HTML中复选框的形式有很多元素和不同功能。其中一些提供选项，而另一些则需要用户输入。通常，默认的复选框只有一个传统的、枯燥的样式。CSS3中动画关键帧属性，可以设置动画使它们看起来更耀眼。

 查看演示

演示1：简单的动画”复选框

设置HTML创建一个标准的无序列表（为了方便测试，特别复制出一份代码）

<ul>

<li>

        <input type="checkbox" name="manager" id="manager" />

        <label for="manager">Project Manager</label>

</li>

<li>

        <input type="checkbox" name="webdesigner" id="webdesigner" />

        <label for="webdesigner">Web Designer</label>

</li>

<li>

        <input type="checkbox" name="webdev" id="webdev" />

        <label for="webdev">Web Developer</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 Staff</label>

</li>

<li>

        <input type="checkbox" name="csr" id="csr" />

        <label for="csr">Customer Service Representative</label>

</li>

</ul>

 

 

首先，隐藏复选框

/* Hide the Ordinary Checkbox */

input[type="checkbox"] {

    display: none;

}

 

然后需要在我们的列表和标签标记的相对位置和填充设置一些样式。

下一步需要使用伪代码在标签之前和之后设置样式。对于这部分，我们将设置复选框Font Awesome，用一个矢量图标。

/* 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;

}

现在我们需要设置图标步骤之前和之后的复选框。

label:before {

    content: '\f096'; /*checkbox unchecked */

}

label:after {

    content: '\f00c'; /*checkbox checked*/

    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;

}

最后一步是设定一个目标，文本框和复选框后的伪代码，并给它一个最大宽度25像素之间和不透明度1。

 

/* Animating the Checkbox Icon */

input[type="checkbox"]:checked + label:after {

    max-width: 25px;

    opacity: 1;

    margin-right: 90px;

}

 

 

演示2：圆框弹跳动画

 

在本次演示中，我们将创建一个圆框，看起来像一个活泼的动画使用CSS3随着一些伪元素单选按钮，CSS3转换和“关键帧动画。

我们的标记就像第一个演示的标记，但我们会改变一些文本和标签。

<ul>

<li>

        <input type="checkbox" name="php" id="php" />

        <label for="php">PHP</label>

</li>

<li>

        <input type="checkbox" name="js" id="js" />

        <label for="js">Javas cript</label>

</li>

<li>

        <input type="checkbox" name="ajax" id="ajax" />

        <label for="ajax">AJAX</label>

</li>

<li>

        <input type="checkbox" name="ruby" id="ruby" />

        <label for="ruby">Ruby</label>

</li>

<li>

        <input type="checkbox" name="python" id="python" />

        <label for="python">Python</label>

</li>

</ul>

用CSS工作

 

在继续之前我们的标签的CSS，隐藏复选框。

/* Hide the Ordinary Checkbox */

input[type="checkbox"] {

    display:none

}

添加一些简单的样式，我们的无序列表，如字体，然后设置样式的标签元素和设置位置相对。

ul li {

    list-style:none;

    margin:10px auto;

    font-family:'Lato'

}

 

/* Checkbox Icons */

label {

    position:relative;

    padding-left:30px;

    font-size:30px;

    cursor:pointer;

    color:#fff;

    padding:17px 28px 0 0

}

再次使用Font Awesome图标作为我们的主要检查选择。用CSS3动画，定义 “关键帧动画的名字。持续4秒，一个迭代次数1和填充模式forwards的圈从大到小直到它淡出跳效果。

label:before {

    content:'\f1db'

}

label:after {

    content:'\f111';

    width:25px;

    overflow:hidden;

    font-size:27px;

    top:18px;

    left:-39px;

    color:#6CFF4C;

    -webkit-animation:bounceout .4s;

    -webkit-animation-iteration-count:1;

    -webkit-animation-fill-mode:forwards;

 

    -moz-animation:bounceout .4s;

    -moz-animation-iteration-count:1;

    -moz-animation-fill-mode:forwards;

 

    animation:bounceout .4s;

    animation-iteration-count:1;

    animation-fill-mode:forwards;

 

}

 

由于Mozilla浏览器不同，需要单独设置一套样式。

@-moz-document url-prefix() {

   label:after {

    content:'\f111';

    width:25px;

    overflow:hidden;

    font-size:27px;

    top:17px !important;

    left:-39px;

    color:#6CFF4C;

    -webkit-animation:bounceout .4s;

    -webkit-animation-iteration-count:1;

    -webkit-animation-fill-mode:forwards;

 

    -moz-animation:bounceout .4s;

    -moz-animation-iteration-count:1;

    -moz-animation-fill-mode:forwards;

 

    animation:bounceout .4s;

    animation-iteration-count:1;

    animation-fill-mode:forwards;

}

}

在里面输入[type="checkbox"]：检查+标签：如果复选框被选中，出现弹跳动画。

/* Animating the Checkbox Icon */

input[type="checkbox"]:checked + label:after {

    -webkit-animation:bounce .4s;

    -webkit-animation-iteration-count:1

 

    -moz-animation:bounce .4s;

    -moz-animation-iteration-count:1;

 

    animation:bounce .4s;

    animation-iteration-count:1

}

 

最后，我们将在“关键帧动画。使用变换属性，我们将从不同的大小和步骤中的圆，使其看起来像它的跳动。如果你想知道更多关于“关键帧动画，请访问此页面了解更多。

/* @Keyframes for Chrome and Safari */

@-webkit-keyframes bounce {

    0%  { -webkit-transform:scale(.8); opacity:.8}

    25% { -webkit-transform:scale(.25); opacity:.25}

    50% { -webkit-transform:scale(1.4); opacity:1.4}

    75% { -webkit-transform:scale(.8); opacity:.8}

    100%{ -webkit-transform:scale(1); opacity:1}

}

@keyframes bounce {

    0%  { transform:scale(.8); opacity:.8}

    25% { transform:scale(.25); opacity:.25}

    50% { transform:scale(1.4); opacity:1.4}

    75% { transform:scale(.8); opacity:.8}

    100%{ transform:scale(1); opacity:1}

}

@-webkit-keyframes bounceout {

    0%  { -webkit-transform:scale(0)}

    25% { -webkit-transform:scale(.8)}

    50% { -webkit-transform:scale(1.4)}

    75% { -webkit-transform:scale(.25)}

    100%{ -webkit-transform:scale(0)}

}

@keyframes bounceout {

    0%  { transform:scale(0)}

    25% { transform:scale(.8)}

    50% { transform:scale(1.4)}

    75% { transform:scale(.25)}

    100%{ transform:scale(0)}

}

 

 

3：交叉复选框的动画演示

标记就像第一个演示，我们只改变了问题和选项数据。

<ul>

<li>

        <input type="checkbox" name="notepad" id="notepad" />

        <label for="notepad">Notepad</label>

</li>

<li>

        <input type="checkbox" name="sb" id="sb" />

        <label for="sb">Sublime Text</label>

</li>

<li>

        <input type="checkbox" name="notepad+" id="notepad+" />

        <label for="notepad+">Notepad++</label>

</li>

<li>

        <input type="checkbox" name="txtmate" id="txtmate" />

        <label for="txtmate">TextMate</label>

</li>

<li>

        <input type="checkbox" name="scite" id="scite" />

        <label for="scite">SciTE</label>

</li>

<li>

        <input type="checkbox" name="ke" id="ke" />

        <label for="ke">Komodo Edit</label>

</li>

</ul>

 

CSS设置

 

隐藏复选框

 

input[type="checkbox"] {

    display:none

}

ul li {

    list-style:none;

    margin:10px auto;

    font-family:'Lato';

    position:relative

}

 

ul li:after {

    content:'';

    position:absolute;

    width:35px;

    height:35px;

    border:4px solid #fff;

    border-radius:6px;

    left:-12px;

    z-index:-1

}

 

然后添加CSS3过渡特性与2秒的持续时间和定时功能的线性动画。

label {

    cursor:pointer;

    color:#c0392b;

    margin:5px 0;

    padding-left:40px;

    position:relative;

    font-size:30px;

    -webkit-transition:.2s linear;

    -moz-transition:.2s linear;

    -o-transition:.2s linear;

    transition:.2s linear

}

该标签之前和之后的伪代码，设置成具有一个3px宽厚的绝对位置。

label:before,label:after {

    content:'';

    left:11px;

    width:3px;

    bottom:0;

    background:#fcff00;

    position:absolute;

    top:0

}

在选择之前，我们将45度旋转这些线，并将原来的位置由14像素的左、右。这里设置了一个线性定时功能，用2秒的时间。伪代码后，我们将它设置为45度，使每一个线交叉。

label:before {

    transform:rotate(45deg);

    transform-origin:0 14px;

    height:0;

    -webkit-transition:.2s linear;

    -moz-transition:.2s linear;

    -o-transition:.2s linear;

    transition:.2s linear

}

 

label:after {

    transform:rotate(-45deg);

    transform-origin:0 20px;

    height:0;

    -webkit-transition:.2s linear .2s;

    -moz-transition:.2s linear .2s;

    -o-transition:.2s linear .2s;

    transition:.2s linear .2s

}

在最后的步骤，我们将目标复选框设置高度百分之100。这将显示我们在过渡属性的帮助下创建的交叉线。我们也将针对该复选框的标签文本本身，给它一个颜色白而发生交叉的动画。

input[type="checkbox"]:checked + label:after,input[type="checkbox"]:checked + label:before {

    height:100%

}

 

input[type="checkbox"]:checked + label {

    color:#fff

}

 

CSS3比较强大。使用伪元素、过渡和动画我们已经创建了三个美丽的复选框，不使用Javas cript实现互动。但有些浏览器，特别是旧版本，即不支持动画。