前端开关按钮样式_纯css3各种开关按钮动画特效
这个插件是⼀款使⽤纯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;
css特效文字/* Last, we make it invisible */
opacity: 0;
/* This one is just for ergonomy */
cursor: pointer;
}
所有demo中都使⽤了上⾯的12⾏checkbox hack代码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。