当前位置:首页 > 网页设计 > CSS > 正文

CSS3制作卷角菜单

 

大的亮点就是使用了CSS3制作了卷边效果,配上js的移动效果,真是与众不同。在这个demo中主要运用了border-radius制作卷边效果,使用gradient实现了导航的渐变效果,而且还使用了border绘制了向上的箭头,同时给箭头配上了一个css3的动画效果。真的不错哟。http://www.w3cplus.com/demo/filed-corner-menu.html
 
标签: <无>
 

 

 
001 <!DOCTYPE HTML>
002 <html lang="en-US">
003 <head>
004     <meta charset="UTF-8">
005     <title>CSS3制作卷角菜单|w3cplus</title>
006     <meta name="keywords" content="css3学习,css3属性详解,css3 transition,如何学好css3">
007     <meta name="description" content="W3CPLUS是一个前端爱好者的家园,W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创,以一起学习,一起进步,共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源,与前端爱好者一起共勉。">
008     <link rel="shortcut icon"href="http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico">
009     <link rel="stylesheet" type="text/css"href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
010     <link rel="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:30px auto;
023     }
024 .corner{
025     background: -webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);
026     background: -moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;
027     background: -o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;
028     background: -ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;
029     background: linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height: 90px;
030     width: 90px;
031     height:90px;
032     border-radius: 0 0 0px 90px / 0 0 0 30px;
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: 5px 2px 8px black;
042     overflow:hidden;
043     -webkit-transition:all 0.3s linear 0s;
044   -moz-transition:all 0.3s linear 0s;
045   -o-transition:all 0.3s linear 0s;
046   -ms-transition:all 0.3s linear 0s;
047   transition:all 0.3s linear 0s;
048 }
049  
050 .corner:after{
051     height:100%;
052     width:100%;
053     position: absolute;
054     content: "";
055     top: -15px;
056     left: -82px;
057     border-radius: 90px 90px 0px 0 / 40px 40px 0 0;
058     z-index: 1;
059     background: #2F2F2F;
060     -webkit-transform: rotate(77deg);
061     -moz-transform: rotate(77deg);
062   -o-transform: rotate(77deg);
063   -ms-transform: rotate(77deg);
064   transform: rotate(77deg);
065     box-shadow: 0px 0px 8px black inset;
066 }
067 .button{
068   float: left;
069     height:40px;
070     margin:20px 20px;
071     border-radius:30px;
072     border:1px solid #151515;
073     box-shadow:0px 2px 2px rgba(0,0,0,0.6);
074     overflow:hidden;
075     }
076 .button li {
077   float: left;
078
079 .button li a{
080     float:left;
081   display:block;
082   text-decoration:none;
083   padding: 0 20px;
084     height:40px;
085     line-height:36px;
086     font-size:14px;
087     color:#eee;
088     text-align:center;
089     border-right:1px solid #151515;
090     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);
091     text-shadow:0px -1px 0px #000;
092     background:-webkit-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
093     background:-moz-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
094   background:-o-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
095   background:-ms-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
096   background:linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
097     }
098 .button li:first-child a{
099     border-radius:30px 0 0 30px;
100     }
101 .button li:last-child a{
102     border-radius:0px 30px 30px 0;
103   border-right: none;
104     }
105 .button li a:hover{
106     cursor:pointer;
107     background:-webkit-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
108     background:-moz-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
109   background:-o-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
110   background:-ms-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
111   background:linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
112     box-shadow:0px 2px 4px rgba(0,0,0,0.8) inset;
113     color:#b7def5;
114     text-shadow:0px 0px 8px rgba(0,162,255,0.8);
115     }
116  
117 .notice{
118     position:relative;
119     padding:10px 0 0 25px;
120   margin: 20px auto;
121   width: 120px;
122     }
123 .arrow{
124     width:13px;
125     height:20px;
126     background:#FC9;
127     position:absolute;
128     top:0px;
129     left:0px;
130     -webkit-animation:notices linear 0.8s infinite ;
131     -moz-animation:notices linear 0.8s infinite ;
132   -o-animation:notices linear 0.8s infinite ;
133   -ms-animation:notices linear 0.8s infinite ;
134   animation:notices linear 0.8s infinite ;
135     }
136 .arrow:after{
137     width:0;
138     height:0;
139     border-width:12px;
140     border-style:solid dashed dashed dashed;
141     border-color:#FC9 transparent transparent transparent;
142     position:absolute;
143     bottom:-22px;
144     left:-5px;
145     display:block;
146     content:"";
147     }
148 @-webkit-keyframes notices{
149     0%{top:0px;}
150     50%{top:10px;}
151     100%{top:0px;}
152     }
153 @-moz-keyframes notices{
154     0%{top:0px;}
155     50%{top:10px;}
156     100%{top:0px;}
157     }
158 @-o-keyframes notices{
159     0%{top:0px;}
160     50%{top:10px;}
161     100%{top:0px;}
162     }
163 @-ms-keyframes notices{
164     0%{top:0px;}
165     50%{top:10px;}
166     100%{top:0px;}
167     } 
168 @keyframes notices{
169     0%{top:0px;}
170     50%{top:10px;}
171     100%{top:0px;}
172     } 
173 </style> 
174 </head>
175 <body>
176 <div class="wrap_top_nav">
177     <nav id="top_nav">
178         <ul class="inline-style clearfix">
179             <li><a href="http://www.w3cplus.com" target="_blank">w3cplus</a></li>
180             <li><a href="http://www.w3cplus.com/resources/css3-tutorial-and-case" target="_blank">css3详解教程</a></li>
181             <li><a href="http://www.w3cplus.com/demos/list.html"target="_blank">css3实例</a></li>
182             <li><a href="http://www.w3cplus.com/demo/tags/242.html"target="_blank">藤藤每日一练</a></li>
183         </ul>
184         <a id="read" href="http://www.w3cplus.com/demo/filed-corner-menu.html"target="_blank">查看原文>></a>
185     </nav>
186 </div>
187 <div class="page">
188     <header id="header">
189         <hgrounp class="white blank">
190             <h1>CSS3制作卷角菜单</h1>
191             <h2>作者:@猫仔(如有更好建议或疑问请加群:1041263)<h2>
192         </hgrounp>
193     </header>
194     <section class="demo">
195     <div class="notice"><div class="arrow"></div>拖动书角看看 *^_^*</div>
196     <div class="form" id="form">
197       <div class="corner" id="corner"></div>
198         <ul class="button">
199           <li><a href="">W3cplus</a></li>
200           <li><a href="">Blog</a></li>
201           <li class="navcurrent"><a href="">About Us</a></li>
202           <li class="borderno"><a href="">Contact</a></li>
203         </ul>
204       </div> 
205     </section>
206 </div>
207 <script>
208 (function(){
209     var form=document.getElementById("form");
210     var corner=document.getElementById("corner")
211     var ftop=form.offsetTop;
212     var fleft=form.offsetLeft;
213     var switchopen=0;
214     corner.onmousedown=function(e){
215         e.preventDefault();
216         form.style.cursor="move";
217         switchopen=1;
218         }
219     form.onmousemove=function(e){
220         if(switchopen==1){
221             if(e.pageX-fleft>90 ||e.pageY-ftop>90){
222                 corner.style.width=corner.style.height=90+"px";
223                 corner.style.left=corner.style.top=-4+"px"
224                 }
225             else{
226                 corner.style.width=corner.style.height=e.pageY-ftop+"px";
227                 
228                 }
229         }
230     }
231     form.onmouseup=function(){
232         switchopen=0;
233                 this.style.cursor="default";
234         }
235     })()
236 </script>
237 </body>
238 </html>
上一篇:在自己制作的discuz插件里面修改title、keyword 下一篇:Web应用界面设计规范