素材网 素材网

CSS3制作鼠标拖动展开卷角菜单特效

下载资源()次

阅读次数()次

发布时间:2014-02-27

CSS3制作鼠标拖动展开卷角菜单特效
分享到:

用法简介:

来源:xw素材网

CSS3制作鼠标拖动展开卷角菜单特效。
文件引用:

<style type="text/css">
ul,li{
	list-style-type:none;
	padding:0;
}
.form{
	width:408px;
	height:200px;
	background:#2f2f2f;
	position:relative;
	overflow:hidden;
	margin:30px auto;
}
.corner{
	background:-webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);
	background:-moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
	background:-o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
	background:-ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
	background:linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
	width:90px;
	height:90px;
	border-radius:0 0 0px 90px / 0 0 0 30px;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
	position:absolute;
	left:-4px;
	top:-4px;
	box-shadow:5px 2px 8px black; 
	overflow:hidden;
	-webkit-transition:all 0.3s linear 0s;
	-moz-transition:all 0.3s linear 0s;
	-o-transition:all 0.3s linear 0s;
	-ms-transition:all 0.3s linear 0s;
	transition:all 0.3s linear 0s;
}
.corner:after{
	height:100%;
	width:100%;
	position:absolute;
	content:"";
	top:-15px;
	left:-82px;
	border-radius:90px 90px 0px 0 / 40px 40px 0 0;
	z-index:1;
	background:#2F2F2F;
	-webkit-transform:rotate(77deg);
	-moz-transform:rotate(77deg);
	-o-transform:rotate(77deg);
	-ms-transform:rotate(77deg);
	transform:rotate(77deg);
	box-shadow:0px 0px 8px black inset;
}
.button{
	float:left;
	height:40px;
	margin:20px 20px;
	border-radius:30px;
	border:1px solid #151515;
	box-shadow:0px 2px 2px rgba(0,0,0,0.6);
	overflow:hidden;
}
.button li {float:left;}
.button li a{
	float:left;
	display:block;
	text-decoration:none;
	padding:0 20px;
	height:40px;
	line-height:36px;
	font-size:14px;
	color:#eee;
	text-align:center;
	border-right:1px solid #151515;
	box-shadow:-1px 0px 0px rgba(255,255,255,0.1) inset,inset 0px -1px 1px rgba(200,200,200,0.1),inset 0px 1px 2px rgba(255,255,255,0.1);
	text-shadow:0px -1px 0px #000;
	background:-webkit-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:-moz-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:-o-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:-ms-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
}
.button li:first-child a{border-radius:30px 0 0 30px;}
.button li:last-child a{border-radius:0px 30px 30px 0;border-right:none;}
.button li a:hover{
	cursor:pointer;
	background:-webkit-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:-moz-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:-o-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:-ms-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	box-shadow:0px 2px 4px rgba(0,0,0,0.8) inset;
	color:#b7def5;
	text-shadow:0px 0px 8px rgba(0,162,255,0.8);
}
.notice{
	position:relative;
	padding:10px 0 0 25px;
	margin:20px auto;
	width:120px;
}
.arrow{
	width:13px;
	height:20px;
	background:#FC9;
	position:absolute;
	top:0px;
	left:0px;
	-webkit-animation:notices linear 0.8s infinite ;
	-moz-animation:notices linear 0.8s infinite ;
	-o-animation:notices linear 0.8s infinite ;
	-ms-animation:notices linear 0.8s infinite ;
	animation:notices linear 0.8s infinite ;
}
.arrow:after{
	width:0;
	height:0;
	border-width:12px;
	border-style:solid dashed dashed dashed;
	border-color:#FC9 transparent transparent transparent;
	position:absolute;
	bottom:-22px;
	left:-5px;
	display:block;
	content:"";
}
@-webkit-keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
@-moz-keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
@-o-keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
@-ms-keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}  
@keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
</style>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

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

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

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

邮箱订阅

什么是邮箱订阅?

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