Css仿ios的开关按钮

Css代码如下

        .al-toggle-button{
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            width: 52px;
            height: 32px;
            background: #dfdfdf;
            border-radius: 16px;
            border: 1px solid #dfdfdf;
            outline: 0;
            box-sizing: border-box;
        }
        .al-toggle-button:checked{
            border-color: #04be02;
            background-color: #04be02;
        }
        .al-toggle-button:before, .al-toggle-button:after{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            height: 30px;
            border-radius: 15px;
            transition: transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
            -webkit-transition: -webkit-transform 0.3s;
        }
        .al-toggle-button:before{
            width: 50px;
            background-color: #fdfdfd;
        }
        .al-toggle-button:after{
            width: 30px;
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .al-toggle-button:checked:before{
            transform: scale(0);
            -webkit-transform: scale(0);
        }
        .al-toggle-button:checked:after{
            transform: translateX(20px);
            -webkit-transform: translateX(20px);
        }

HTML中引用

<input type="checkbox" class="al-toggle-button">

效果图~~

时间: 2024-11-01 18:07:25

Css仿ios的开关按钮的相关文章

Android自定义控件——仿ios开关按钮

转载请注明出处:http://blog.csdn.net/allen315410/article/details/39319057 大凡在公司做客户端产品开发的都会发现,android和ios的差异化,ios得益于"老乔"的精心设计,界面用户体验做到了极致,而android秉承开源思想,界面用户体验百家各有其长,相互不得统一.不说废话,先上图,看看ios的"开关按钮": 往往在公司,产品设计原型优先参考了ios的设计,这下可苦了android开发者,android开

前端心得---仿IOS拾取器控件(转轮控件)

希望做一个类似IOS拾取器的控件,在IOS上该控件的效果是这样的:,我也把该效果称之为为轮子效果. 要实现这个效果,能够用到的技术点非常简单,无非是transform的translate3d和rotate,不过要想很好的实现,还要建立一个精确的数学模型,来解决如何[摆放]的问题.特别是这个效果不是静态的,需要满足鼠标滑动的时,这个轮子要转起来,这就需要仔细思索了.当然,在最开始重点还是要搞清楚自变量是什么.因变量是什么.它们之间的关系是什么以及该需求的一些性质.找到了好的性质,可以减轻工作量,并

在uwp仿IOS的页面切换效果

有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画.导航到新页面时,使用页面前进的动画. UWP自带很多切换效果,位于 Windows.UI.Xaml.Media.Animation 中.与苹果的切换效果最接近的是 PaneThemeTransition (而不是EdgeUIThemeTransition). PaneThemeTransition

Android仿IOS回弹效果 ScrollView回弹 总结

Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  需要仿IOS 下拉回弹的效果 , 我在网上搜了很多 大多数都是拿scrollview 改吧改吧 试了一些  发现总有点小问题 下面的代码是我对大家发布的做了点小修改   觉得没太大问题 package com.example.myscrollview; import android.content.Context; import android.graphics.Rect; import android.util

html css 仿微信底部自定义菜单

最近几个月一直从事微信开发,从刚开始的懵懂渐渐成长了一点.今天觉得微信底部自定义菜单,如果能在html的页面上也能显示就好了. 记得以前看过某个网页有类似效果.查找了该网页的css.  ok现在html css 实现微信自定义菜单效果. 不多说直接上代码. /** * 仿微信自定义菜单 * * @author xuyw * @email [email protected] * @date 2014-07-27 */ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT

android 下拉刷新上拉加载更多,高仿ios左滑动删除item,解决了众多手势问题

一.前言 老规矩,别的不说,这demo是找了很相关知识集合而成的,可以说对我这种小白来说是绞尽脑汁!程序员讲的是无图无真相!现在大家一睹为快! 二.比较关键的还是scroller这个类的 package com.icq.slideview.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; i

&#8203;android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果

项目已经从git上独立出来,各个效果已经分好类别,页面new调用就可以了,不会卡顿. 效果如下图: ​android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果

Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

转载请注明出处http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,IOS上面直接设置某个属性就可以实现这一功能,但是Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText,接下来就带大家来实现这一小小的功能 我们知道,我们可以为我们的输入框在上下左右

CSS 修改 IOS 默认按钮样式

不知道大家在做移动端页面的时候有没遇到过在 IOS 端 一些按钮显示和安卓的截然不同,今天下午又有一个小伙在群里问这个问题.我记得之前我也遇到过,今天给大家分享一下怎么使用 CSS修改IOS的默认样式. ======================================================== 小月博客 http://www.aliyue.net WEB ======================================================== 第一: