CSS3制作卷角菜单.doc

CSS3制作卷角菜单大的亮点就是使用了CSS3制作了卷边效果，配上js的移动效果，真是与众不同。在这个demo中主要运用了border-radius制作卷边效果，使用gradient实现了导航的渐变效果，而且还使用了border绘制了向上的箭头，同时给箭头配上了一个css3的动画效果。真的不错哟。 标签： 001 002 003 004 005 CSS3制作卷角菜单|w3cplus006 007 008 009 010 011 012 ul,li013 list-style-type:none;014 padding:0;015 016 .form017 width:405px;018 height:200px;019 background:#2f2f2f;020 position:relative;021 overflow:hidden;022 margin:30px auto;023 024 .corner025 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:after051 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 .button068 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 a080 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 a099 border-radius:30px 0 0 30px;100 101 .button li:last-child a102 border-radius:0px 30px 30px 0;103 border-right: none;104 105 .button li a:hover106 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 .notice118 position:relative;119 padding:10px 0 0 25px;120 margin: 20px auto;121 width: 120px;122 123 .arrow124 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:after137 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 notices149 0%top:0px;150 50%top:10px;151 100%top:0px;152 153 -moz-keyframes notices154 0%top:0px;155 50%top:10px;156 100%top:0px;157 158 -o-keyframes notices159 0%top:0px;160 50%top:10px;161 100%top:0px;162 163 -ms-keyframes notices164 0%top:0px;165 50%top:10px;166 100%top:0px;167 168 keyframes notices169 0%top:0px;170 50%top:10px;171 100%top:0px;172 173 174 175 176 177 178 179 w3cplus180 css3详解教程181 css3实例182 藤藤每日一练183 184 查看原文185 186 187 188 189 190 CSS3制作卷角菜单191 作者：猫仔(如有更好建议或疑问请加群：1041263)192 193 194 195 拖动书角看看 *_*196 197 198 199 W3cplus200 Blog201 About Us202 Contact203 204 205 206 207 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-fleft90 |e.pageY-ftop90)222 corner.style.width=corn