按钮图标

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

阿里云


这是使用纯 css3 制作的 4 种开关按钮动画效果。这 4 个效果按钮分别是:按压式按钮、上下拨动按钮、滑动按钮和电源开关按钮。每一个开关按钮点击时都带有出色的动画效果。共有 4 种效果。在这个插件中使用了“CHECKBOX HACK”技术。checkbox hack 允许我们在纯 css 中切换处理程序。它依赖于一个 checkbox(可能是选中状态也可能是未选中状态),:checked 伪元素和一个兄弟选择器(~ 或 +)。通俗的讲,checkbox hack 的描述是:如果 checkbox 被选中,那么接下来的某个元素的行为是如此如此...

在过去的技术中,都是使用一个带有 id 的 checkbox 和一个带有 for 的 label 来组成一个系统。这个新技术允许我们隐藏 checkbox 而通过 label 来切换 checkbox 的状态。这项技术的唯一缺点是 mobile Safari 不支持它。来看一下这个 demo 的工作原理:通过透明度使 checkbox 不可见,然后将它放置在你想放置的任何地方(例子中放在 label 上面)。当点击了 label 你实际上是点击了 checkbox。代码如下:

也想出现在这里?联系我们
创客主机
  1. .switch input {
  2.     /* First, we make it as wide as the container */
  3.     position: absolute;
  4.     width: 100%;
  5.     height: 100%;
  6.     /* Then, we put it on top of everything else */
  7.     z-index: 100;
  8.     /* Last, we make it invisible */
  9.     opacity: 0;
  10.     /* This one is just for ergonomy */
  11.     cursor: pointer;
  12. }

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

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

已有 514 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!