字号: - o +

CSS3 iphone式开关的推荐写法

2012-10-10 前端开发 0人评论 17,936次浏览   

子曰:能为别人设想的人,永远不寂寞 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

话说这个问题纠结了近一个小时,为什么呢?看看就知道了。

在公司的商旅Web移动版本项目上有这么一个交互,需要模仿iphone自带的开关,好吧,肯定没什么问题。

Tip:请使用Chrome查看以下案例

点此查看实例展示

写啊写,代码出来了:

.onoff{
	overflow: hidden;
	display: inline-block;
	margin:0 0 -5px 15px;
	width: 60px;height:20px;
	border-radius: 20px;
	border: solid 1px #999;
}
.onoff label{
	display: block;
	margin-left: -40px;
	width: 100px;height: 20px;
	text-align: right;color: #8B8B8B;border-radius:20px;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DFDFDF),color-stop(1,#FEFEFE));
}
.onoff label::after{
	position: relative;left:-17px;top: -20px;
	display: inline-block;
	content: '';width: 6px;height: 6px;
	border: solid 2px #999;
	border-radius: 10px;
}
.onoff i{
	display: block;
	width: 60px;height: 20px;
	border-radius:20px;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FE7D00),color-stop(1,#FEA753));
}
.onoff i::before{
	position: relative;top: -7px;left:-15px;
	display: inline-block;
	content: '';width: 2px;height: 10px;
	background-color: #fff;
}
.onoff i::after{
	position: relative;top: -1px;left:1px;
	display: inline-block;
	content: '';width: 20px;height: 20px;
	border: solid 1px #999;
	border-radius: 50px;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DADADA),color-stop(1,#FAFAFA));
	box-shadow: inset 0 0 1px #fff;
}

点此查看实例展示

本文转载自:大前端 » CSS3 iphone式开关的推荐写法

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

发表我的评论

*

*

取消