CSS3模拟开关样式-BUTTON SWITCHES WITH CHECKBOXES

所属分类:UI-标签

 37036  326  查看评论 (2)
分享到微信朋友圈
X
CSS3模拟开关样式-BUTTON SWITCHES WITH CHECKBOXES ie兼容10

开关想必大家在日常的生活中是经常见到的,那么接下来我就给大家介绍一款由css3打造而成的模拟开关。

预览图

width="474" height="300" title="CSS3模拟开关样式" alt="CSS3模拟开关样式"/>

alt=""/>


使用步骤

1、引入以下的js和css文件

 <link rel="stylesheet" type="text/css" href="css/style.css">


2、在body标签中加入以下格式的html代码,其实是一个 div 包含一个 cheeckbox 和 lable

 <div class="switch demo1">
    <input type="checkbox" checked="checked"> <label></label>
</div>


以上只是第一个示例的实现方式,那么其它的样式大家可以查看 demo 的源码

相关插件-标签

css3-button-with-tooltip

css3-button-with-tooltip很清新
  标签
 32167  294

select美化小插件

select美化插件
  标签
 50388  368
  标签
 70008  418

云签,字体悬浮,无限移动(原创)

js原生实现字体悬浮,也就是云签,鼠标移入字体悬停,点击调连接,移开继续移动漂浮
  标签
 26613  350

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    pym?( ̄? ̄?) 0
    2021/3/1 8:26:35
    可以在小程序上使用吗 回复
    Hello,GoodBye 0
    2015/1/4 14:19:41
    十分感谢,很赞的东东!! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复