纯css3各种开关按钮动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 纯css3各种开关按钮动画特效
纯css3各种开关按钮动画特效
分享:

    插件介绍

    这是使用纯css3制作的4种开关按钮动画效果。这4个效果按钮分别是:按压式按钮、上下拨动按钮、滑动按钮和电源开关按钮。每一个开关按钮点击时都带有出色的动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:11-23
    阅读:

简要教程

这个插件是一款使用纯css3制作的开关按钮动画特效。共有4种效果。在这个插件中使用了“CHECKBOX HACK”技术。

什么是CHECKBOX HACK

checkbox hack允许我们在纯css中切换处理程序。它依赖于一个checkbox(可能是选中状态也可能是未选中状态),:checked伪元素和一个兄弟选择器(~ 或 +)。通俗的讲,checkbox hack的描述是:如果checkbox被选中,那么接下来的某个元素的行为是如此如此...

在过去的技术中,都是使用一个带有id的checkbox和一个带有for的label来组成一个系统。这个新技术允许我们隐藏checkbox而通过label来切换checkbox的状态。这项技术的唯一缺点是 mobile Safari 不支持它。

来看一下这个demo的工作原理:通过透明度使checkbox不可见,然后将它放置在你想放置的任何地方(例子中放在label上面)。当点击了label你实际上是点击了checkbox。代码如下:

.switch input {
    /* First, we make it as wide as the container */
    position: absolute;
    width: 100%;
    height: 100%;
    /* Then, we put it on top of everything else */
    z-index: 100;
    /* Last, we make it invisible */
    opacity: 0;
    /* This one is just for ergonomy */
    cursor: pointer;
}
                

所有demo中都使用了上面的12行checkbox hack代码。