按钮开关demo

时间：2022-05-05 21:14:15
源码如下：    
<style>
        .container{ margin: 0px;padding: 100px 250px;}
        .switch-test{
            -webkit-appearance: none;
            appearance: none;
            position: relative;
            width: 52px;
            height: 32px;
            border: 1px solid #DFDFDF;
            outline: 0;
            border-radius: 16px;
            box-sizing: border-box;
            font-weight:bold;">#DFDFDF;
            -webkit-transition: background-color 0.1s, border 0.1s;
            transition: background-color 0.1s, border 0.1s;
        }
        .switch-test:before{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 30px;
            border-radius: 15px;
            font-weight:bold;">#FDFDFD;
            -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
            transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
            transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
            transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
        }
        .switch-test:after{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            font-weight:bold;">#FFFFFF;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
            transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
            transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
            transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
        }
        .switch-test:checked{
            border-color: #00cc99;
            font-weight:bold;">#00cc99;
        }
        .switch-test:checked:before{
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .switch-test:checked:after{
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
        }
    </style>
</head>
<body>
<div class="container">
    <input class="switch-test" type="checkbox"/>
</div>
</body>
效果截图如下：

按钮开关demo 按钮开关demo

按钮开关demo的更多相关文章

  1. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  2. 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天说下这些格式，明天做个demo

    有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...

  3. 在线浏览PDF之PDF&period;JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  4. 【微框架】Maven &plus;SpringBoot 集成 阿里大鱼 短信接口详解与Demo

    Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...

  5. vue双向数据绑定原理探究&lpar;附demo&rpar;

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  6. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  7. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  8. 钉钉开放平台demo调试异常问题解决：hostname in certificate didn&&num;39&semi;t match

    今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...

  9. 无限分级和tree结构数据增删改【提供Demo下载】

    无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...

随机推荐

  1. Win7 电脑设置临时网络，无法加入网络；internet禁止网络共享

    1.电脑的本地连接中的共享,被管理员禁用.网上试了一些方法,都不可行.最后想到修改注册表.我找到了注册表中的shared选项.将0修改为1.则实现了本地连接的共享. 2.但是即便如此,由本地连接分享出 ...

  2. DB2执行脚本

    经常会遇到数据库脚本放在.sql文件中,那么怎么去执行这个脚本,而不需要将脚本中的东西粘贴出来再数据库链接工具中执行呢? 下面是DB2数据库脚本执行的办法 环境介绍: 脚本文件名:Script.sql ...

  3. IOS试题收集1

    IOS试题收集1 1.Objective C中有多继承吗?没有的话用什么代替? Protocol 2.Objective C中有私有方法吗?私有变量呢? OC类里面只有静态方法和实例方法这两种,@pr ...

  4. JAVA冒泡排序&sol;JAVA冒泡排序再找出给定数据中的最大值最小值&sol;JAVA数组排序

    //数组中排序    int in[] = {1,6,5,8,9};    Arrays.sort(in);    for(int i=0;i<in.length;i++){       Sys ...

  5. extjs 优化小建议

    1 原文信息 原文标题: Sencha Con 2013: Ext JS Performance tips 原文地址: [http://edspencer.net/2013/07/19/sencha- ...

  6. 【Android Developers Training】 22&period; 与其他fragment通信

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  7. 非Unicode编码的软件如何在Windows系统上运行

    我们常常会遇到这样一种情况:点开某些日文软件(我不会说就是galgame( ╯□╰ ))会出现乱码或者直接无法运行. 出现乱码的原因很简单:编码与译码的方式不一致!!!!!!!!!!! 首先大家需要知 ...

  8. &lbrack;转&rsqb;python的requests发送&sol;上传多个文件

    1.需要的环境 Python2.X Requests 库 2.单字段发送单个文件 在requests中发送文件的接口只有一种,那就是使用requests.post的files参数, 请求形式如下:   ...

  9. Unity透明Shader

    Shader "Custom/Blocks" { Properties { _Color (,,,) _MainTex ("Albedo (RGB)", 2D) ...

  10. An error occurred during installation&colon; No such plugin&colon; cloudbees-folder

    解决办法:下载cloudbees-folder.hpi放在目录/usr/local/tomcat/webapps/jenkins/WEB-INF/detached-plugins/下,重启tomcat ...

相关文章