素材网 素材网

CSS3制作逼真滑杆开关切换按钮特效

下载资源()次

阅读次数()次

发布时间:2014-05-17

CSS3制作逼真滑杆开关切换按钮特效
分享到:

用法简介:

来源:xw素材网

CSS3制作逼真滑杆开关切换按钮特效。
文件引用:

.switch {
	display: inline-block;
	margin: 10em 2em;
	position: relative;
	border-radius: 3.5em;
	-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
	-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
	box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
}
.switch label {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.switch input {
	display: none;
}
.switch span {
	display: block;
	-webkit-transition: top 0.2s;
	-moz-transition: top 0.2s;
	-ms-transition: top 0.2s;
	-o-transition: top 0.2s;
	transition: top 0.2s;
}
.switch-border1 {
	border: 0.1em solid #000;
	border-radius: 3.5em;
	-webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
	box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
}
.switch-border2 {
	width: 6.6em;
	height: 12.6em;
	position: relative;
	border: 0.1em solid #323232;
	background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
	background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
	border-radius: 3.4em;
}
.switch-border2:before,
.switch-border2:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: .3;
	border-radius: 3.4em;
}
.switch-border2:before {
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
	background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
	background: -moz-linear-gradient(#000, rgba(0,0,0,0));
	background: -ms-linear-gradient(#000, rgba(0,0,0,0));
	background: -o-linear-gradient(#000, rgba(0,0,0,0));
	background: linear-gradient(#000, rgba(0,0,0,0));
}
.switch-border2:after {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
	background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
	background: -moz-linear-gradient(rgba(0,0,0,0), #000);
	background: -ms-linear-gradient(rgba(0,0,0,0), #000);
	background: -o-linear-gradient(rgba(0,0,0,0), #000);
	background: linear-gradient(rgba(0,0,0,0), #000);
}
.switch-top {
	width: 100%;
	height: 84%;
	position: absolute;
	top: 8%;
	left: 0;
	z-index: 1;
	background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
	background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
	border-radius: 3.4em;
}
.switch-shadow {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-radius: 3.4em;
	-webkit-box-shadow: 0 0 2em black inset;
	-moz-box-shadow: 0 0 2em black inset;
	box-shadow: 0 0 2em black inset;
}


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。