css3动画过渡按钮

css(css代码是网上找的)和html代码:

这里写图片描述

.mui-switch {width: 52px;height: 31px;position: relative;border: 1px solid #dfdfdf;background-color: #fdfdfd;box-shadow: #dfdfdf 0 0 0 0 inset;border-radius: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;background-clip: content-box;display: inline-block;-webkit-appearance: none;user-select: none;outline: none; }.mui-switch:before {content: '';width: 29px;height: 29px;position: absolute;top: 0px;left: 0;border-radius: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;background-color: #fff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }.mui-switch:checked {border-color: #64bd63;box-shadow: #64bd63 0 0 0 16px inset;background-color: #64bd63; }.mui-switch:checked:before {left: 21px; }.mui-switch.mui-switch-animbg {transition: background-color ease 0.4s; }.mui-switch.mui-switch-animbg:before {transition: left 0.3s; }.mui-switch.mui-switch-animbg:checked {box-shadow: #dfdfdf 0 0 0 0 inset;background-color: #64bd63;transition: border-color 0.4s, background-color ease 0.4s; }.mui-switch.mui-switch-animbg:checked:before {transition: left 0.3s; }.mui-switch.mui-switch-anim {transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }.mui-switch.mui-switch-anim:before {transition: left 0.3s; }.mui-switch.mui-switch-anim:checked {box-shadow: #64bd63 0 0 0 16px inset;background-color: #64bd63;transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }.mui-switch.mui-switch-anim:checked:before {transition: left 0.3s; }.set_default{position: absolute;width: 52px;right: 17px;top: 8px;}.postmast{width: 100%;height: 50px;position: absolute;top: 0px;left: 0px;z-index: 2;}<div class="set_default"><label><input class="mui-switch mui-switch-animbg" type="checkbox" ng-model="inpArr[0]" ng-change="touchSetCheck(0)" ng-checked="inpArr[0]"></label></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云上万个 Kubernetes 集群大规模管理实践

内容简介&#xff1a; 阿里云容器服务从2015年上线后&#xff0c;一路伴随并支撑双十一发展。在2019年的双十一中&#xff0c;容器服务ACK除了支撑集团内部核心系统容器化上云和阿里云的云产品本身&#xff0c;也将阿里多年的大规模容器技术以产品化的能力输出给众多围绕双十一…

SpringBoot2 整合 AXIS 服务端和客户端

文章目录一、服务端1. 版本选型2.导入依赖3. SERVLET4. 接口5.实现类6. 配置工厂7.启动类8. WEB-INF目录18. WEB-INF目录29. /目录19. /目录210. wsdd11. 测试验证二、客户端开源源码.一、服务端 1. 版本选型 阿健/框架版本spring-boot2.5.4axis1.4axis-jaxrpc1.4commons-dis…

地理文本处理技术在高德的演进(下)

在【上篇】里&#xff0c;我们介绍了地理文本处理技术在高德的整体演进&#xff0c;选取了几个通用query分析的点进行了介绍。下篇中&#xff0c;我们会选取几个地图搜索文本处理中特有的文本分析技术做出分析&#xff0c;包括城市分析&#xff0c;wherewhat分析&#xff0c;路…

真正拿大厂offer的人,都赢在这一点

学好一门技术最有价值的体现就是“面试”&#xff0c;对于大部分人来说 “面试”是涨薪的主要途径之一&#xff0c;因此我们需要认真的准备面试&#xff0c;因为它直接决定着你今后几年内的薪资水平&#xff0c;所以在面试这件事上花费再多的时间和精力都是值得的。你会发现有…

今天的这个小成绩,需要向阿里云的朋友报告一下!

今天&#xff0c;想向大家报告一个最新的小成绩&#xff1a; 在数据库领域的权威评选——Gartner全球数据库魔力象限评比中&#xff0c;阿里云成功进入“挑战者”象限&#xff0c;连续两年作为唯一的中国企业入选。 最新评选表明&#xff0c;阿里云过去一年在产品技术领域进展迅…

90%的人会遇到性能问题,如何用1行代码快速定位?

阿里妹导读&#xff1a;在《如何回答性能优化的问题&#xff0c;才能打动阿里面试官&#xff1f;》中&#xff0c;主要是介绍了应用常见性能瓶颈点的分布&#xff0c;及如何初判若干指标是否出现了异常。 今天&#xff0c;齐光将会基于之前列举的众多指标&#xff0c;给出一些常…

SpringBoot2 整合 CXF 服务端和客户端

文章目录一、CXF服务端1. 导入依赖2. 创建service接口3. 接口实现类4. cxf配置类5. 查看wsdl结果二、CXF客户端2.1. 客户端2.2. 断点调试2.3. 发起调用服务开源源码.一、CXF服务端 1. 导入依赖 <properties><cxf.version>3.3.1</cxf.version></propertie…

如果张东升是个程序员,你还有机会吗?

来源 | 编程技术宇宙责编 | Carol封图 | CSDN 下载自视觉中国张东升是一家互联网公司的程序员&#xff0c;一直以来都勤勤恳恳老实工作。可最近一段时间&#xff0c;老板接了几个项目回来&#xff0c;不但开启了996的工作模式&#xff0c;更要命的是频频更改需求&#xff0c;弄…

蚂蚁金服资深总监韩鸿源:企业级数据库平台的持续与创新

2019年11月19日&#xff0c;蚂蚁金服在北京举办“巅峰洞见聚焦金融新技术”发布会&#xff0c;介绍2019双11支付宝背后的技术&#xff0c;并重磅发布全新OceanBase 2.2版本。欢迎持续关注&#xff5e; 蚂蚁金服研究员韩鸿源在发布会分享了《企业级数据库平台的持续与创新》&…

jquery标题左右移动动画

标题会在红框范围内来回移动 html和css代码 <div class"menu-notice" click"check_cart"><div class"menu-notice-logo"></div><div class"menu-notice-title" ref"noticeTitle">{{storeinfo[0] ?…

解密 云HBase 冷热分离技术原理

前言 HBase是当下流行的一款海量数据存储的分布式数据库。往往海量数据存储会涉及到一个成本问题&#xff0c;如何降低成本。常见的方案就是通过冷热分离来治理数据。冷数据可以用更高的压缩比算法&#xff08;ZSTD&#xff09;&#xff0c;更低副本数算法&#xff08;Erasure…

再见,工资!2020年6月程序员工资统计,平均14404元,网友:又跌了!

见了鬼&#xff01;工资竟然又跌了2020 年 6 月全国招收程序员 313739 人。2020 年 6 月全国程序员平均工资 14404 元&#xff0c;工资中位数 12500 元&#xff0c;其中 95% 的人的工资介于 5250 元到 35000 元。怪不得小陈发现最近猎头的“骚扰”电话越来越少了&#xff0c;这…

mysql创建function 报错误1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in

解决方法&#xff1a; 执行这条sql就可以了&#xff1a; set global log_bin_trust_function_creators1;运行结果&#xff1a; 函数创建成功了

一个实时精准触达系统的自我修养

问题定义 在互联网行业&#xff0c;唯一不变的就是一直在变化。作为技术同学&#xff0c;我们经常会碰到以下几种需求&#xff1a; 当用户收藏的商品降价后及时通知用户&#xff0c;促进双方交易达成&#xff1b;新用户或90天内未成交的用户浏览多个商品后引导用户主动和卖家聊…

vue-datepicker的使用

写这个文章主要是记录下用法&#xff0c;官网已经说的很详细了 npm install vue-datepicker --savehtml代码 <myDatepicker :date"startTime" :option"multiOption" :limit"limit"></myDatepicker> <myDatepicker :date"e…

数据库怎么选择?终于有人讲明白了

作者 | Alex Petrov所有数据库管理系统的主要工作都是可靠地存储数据并使其对用户可用。我们使用数据库作为数据的主要来源&#xff0c;帮助我们在应用程序的不同部分之间共享数据。我们使用数据库&#xff0c;而不是在每次创建新应用程序时寻找存储和检索信息的方法&#xff0…

医疗数据典型特征及架构发展方向研究

前言 医疗健康产业目前呈高速发展状态&#xff0c;处在互联网对医疗行业赋能的关键阶段&#xff0c;由于医疗行业数据的隐私性较强&#xff0c;通过传统方式很难获取公开的医疗健康数据进行研究&#xff0c;根据阿里云天池比赛赛题设置研究及提供的脱敏数据集着手进行分析是比…

分布式事务 GTS 的价值和原理浅析

GTS 今年双 11 的成绩 今年 2684 亿的背后&#xff0c;有一个默默支撑&#xff0c;低调到几乎被遗忘的中间件云产品——GTS&#xff08;全局事务服务&#xff0c;Global Transaction Service&#xff09;&#xff0c;稳稳地通过了自 2014 年诞生以来的第 5 次“大考”。 2019 …

kafka java.net.UnknownHostException: node4 Error connecting to node node4:9092

解决&#xff1a;修改kafka的server.properties文件 vim /kafka安装路径/config/server.properties 去除下面这行配置的注释&#xff0c;并设置对应的ip地址 #advertised.listenersPLAINTEXT://your.host.name:9092 advertised.listenersPLAINTEXT://192.168.92.104:9092 重启…

看全新升级的KubeSphere 3.0 如何助力企业在容器混合云时代乘风破浪?

数据时代&#xff0c;层出不穷的创新型业务对企业IT提出了更高的要求&#xff0c;业务、技术和管理方面的挑战也逐渐显现。对此&#xff0c;越来越多的企业希望能够快速、简单地创建企业应用&#xff0c;敏捷地满足业务创新的需求&#xff0c;同时还能维持极高的企业级服务水平…