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>css3动画过渡按钮相关推荐
- html++鼠标跟随动画,css3动画过渡实现鼠标跟随导航效果
本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果,分享给大家,具体如下: 鼠标跟随导航效果 效果知识点:html/css布局思维, div+css讲解,css3动画,盒子模型, 浮动与定位,鼠标 ...
- CSS3动画过渡的jquery动态弹出框插件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84111711 在线演示 本地下载
- 汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构 该按钮变形动画使用嵌套 的H ...
- html实现点赞动画效果代码,Twitter“点赞”红心按钮CSS3动画特效
这是一款效果非常炫酷的仿Twitter"点赞"红心按钮CSS3动画特效.该"点赞"特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会 ...
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对 ...
- 16个css3动画按钮/纯代码
16个超酷的CSS3动画按钮,纯码 图片: html: css: 图片: 效果: --------懒得截了,纯css,直接复制粘贴就行 html: <!DOCTYPE html> < ...
- CSS3动画学习（过渡，旋转，缩小，倾斜）
CSS3动画学习(过渡,旋转,缩小,倾斜) 过渡transition perspective 透视 设置元素被查看位置的视图 过渡transition 为了添加某种效果可以从一种样式转变到另一个的时候 ...
- 用html和css怎么做出点击关注红心,Twitter“点赞”红心按钮CSS3动画特效
这是一款效果非常炫酷的仿Twitter"点赞"红心按钮CSS3动画特效.该"点赞"特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会 ...
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
最新文章
- Go 分布式学习利器（10）-- Go语言的接口
- 数字图像处理知识点总结
- Java学习：多线程（2）
- 移动app崩溃原因及场景
- 10行代码实现小程序支付功能！丨实战
- 2016年5月心情吧 233
- ESP8266的Arduino IDE下载和TTL下载
- div圆角，阴影效果。
- 解决 用VirtualBox安装Windows95后启动乱码
- [吐槽]今天单纯吐槽一下VS2017社区版
- Selenium+超级鹰进行识别滑动操作
- 面试题猜想：1+1等于几？
- arcgis批量裁剪tif文件
- 【动态更新】解决夫妻两地分居手续
- 软件开发过程与项目管理
- MSD3393/MSD3463 屏参及REG对照表
- 王道书P41 T22（单链表实现）
- 【C#高级详解】——刘铁猛老师
- 致读者的一封信——付费专栏《数据科学技术与应用_中国大学MOOC_持续更新》用户调查【2021/1/22】
- 专业人士告诉你数据分析师适合女生吗？