预览加载中，请您耐心等待几秒...

CSS3制作卷角菜单.doc

预览
1/7
2/7
3/7
4/7
5/7
6/7
7/7

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

CSS3制作卷角菜单 大的亮点就是使用了CSS3制作了卷边效果，配上js的移动效果，真是与众不同。在这个demo中主要运用了border-radius制作卷边效果，使用gradient实现了导航的渐变效果，而且还使用了border绘制了向上的箭头，同时给箭头配上了一个css3的动画效果。真的不错哟。 标签：<无> 001 <!DOCTYPEHTML> 002 <htmllang="en-US"> 003 <head> 004 <metacharset="UTF-8"> 005 <title>CSS3制作卷角菜单|w3cplus</title> 006 <metaname="keywords"content="css3学习,css3属性详解,css3transition,如何学好css3"> 007 <metaname="description"content="W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。"> 008 <linkrel="shortcuticon"href="http://www.ybesw.com/favicon.ico"> 009 <linkrel="stylesheet"type="text/css"href="http://www.ybesw.com/forum-39-1.html"media="all"/> 010 <linkrel="stylesheet"type="text/css"href="css/style.css"media="all"> 011 <style> 012 ul,li{ 013 list-style-type:none; 014 padding:0; 015 } 016 .form{ 017 width:405px; 018 height:200px; 019 background:#2f2f2f; 020 position:relative; 021 overflow:hidden; 022 margin:30pxauto; 023 } 024 .corner{ 025 background:-webkit-linear-gradient(45deg,#2e2e2e24%,#5F5F5F40%,#6f6f6f43%,#5F5F5F46%,#2F2F2F50%,#fff50%,#fff); 026 background:-moz-linear-gradient(45deg,#2e2e2e24%,#5F5F5F40%,#6f6f6f43%,#5F5F5F46%,#2F2F2F50%,#fff50%,#fff);height:90px; 027 background:-o-linear-gradient(45deg,#2e2e2e24%,#5F5F5F40%,#6f6f6f43%,#5F5F5F46%,#2F2F2F50%,#fff50%,#fff);height:90px; 028 background:-ms-linear-gradient(45deg,#2e2e2e24%,#5F5F5F40%,#6f6f6f43%,#5F5F5F46%,#2F2F2F50%,#fff50%,#fff);height:90px; 029 background:linear-gradient(45deg,#2e2e2e24%,#5F5F5F40%,#6f6f6f43%,#5F5F5F46%,#2F2F2F50%,#fff50%,#fff);height:90px; 030 width:90px; 031 height:90px; 032 border-radius:000px90px/00030px; 033 -webkit-transform:rotate(-90deg); 034 -moz-transform:rotate(-90deg); 035 -o-transform:rotate(-90deg); 036 -ms-transform:rotate(-90deg); 037 transform:rotate(-90deg); 038 position:absolute; 039 left:-4px; 040 top:-4px; 041 box-shadow:5px2px8pxblack; 042 overflow:hidden; 043 -webkit-transition:all0.3slinear0s; 044 -moz-tra